One way of achieving this technique is by using the quicktag called “more”. The quicktag “more” is inserted into the post at the desired break-off (or cut-off) point so that everything above it become an excerpted content of the post and everything below it will only be readable when the visitors click on the title or a link to view the whole post.
The quicktag “more” is implemented by inserting the following line of code into the post:
However, by default, when a visitor click on the Read More link, the web page loads and then automatically forwards or jumps to the spot where the <!–more–> tag is set in the post. If you do not want this kind of positioning, you can change the default function of how this works by editing the following line in wp-includes/template-functions-post.php:
$output .= ‘ <a href="’. get_permalink() . "#more-$id">$more_link_text</a>";
$output .= ‘ <a href="’. get_permalink() ."">$more_link_text</a>";
$output .= ‘ <a href="’. get_permalink() ."”>$more_link_text</a>’;
After the change, the Read More link will load the blog post and stop at the top of page instead of position where the quicktag “more” were.