CODEWITHSUNDEEP
javascriptphpjqueryscrollurl-parameters
d.jordan
d.jordan

Reputation: 63

Scroll to position after reload

I'm not that into Javascript but I think this could be achieved easily.

I've got a link on my page that sets a parameter (with PHP). That parameter is used to get how much posts to show. This works like a charm.

But now I want to scroll to the postition where the user clicked the link after the page reloads with the parameters. So the users doesn't have to scroll through the posts he already saw.

So here are the steps:

  1. User clicks link to load more posts
  2. Site gets reloaded with parameter (e.g. domain.com/?numberofposts=10)
  3. Now the Site should scroll to the position the users was when he clicked the link

I was trying to achieve that with scrollTo etc but I cant get it working. My thaughts were to pass the scrollposition as an other parameter maybe?

Do someone know how to solve this? Thank you :)

Upvotes: 0

Views: 1663

Answers (2)

Beep
Beep

Reputation: 122

You need to know where you have to scroll to. So yes, you do need to store the scrollposition somewhere (or pass it as a parameter).

Upvotes: 0

Matheno
Matheno

Reputation: 4142

By including an anchor tag within a post or page, you can place links in the body of your post which when clicked allow the reader to jump to another location on the page.

The anchor tag will consist of two HTML elements. First, you'll want to create the link.

If you are linking to a spot on the same page, the format of the link will be similar to:

<a href="#anchor">Link Text</a>

For example, if the text is "Read more about raptors!" then your HTML should look like this:

<a href="#raptors">Read more about raptors!</a>

The above anchor link only works when you are jumping to a specified spot on the same webpage. If you want a link to jump a specific location on a different page, you'll need to replace #anchor with the full URL for the page, similar to:

<a href="http://examplecom/blog/filename.html#anchor">Link Text</a>

The second part of an anchor tag is the actual anchor. The anchor should be placed at the beginning of the line where you want to start reading after you jump similar to:

<a name="anchor"></a>

Following our previous example, the anchor code will be:

<a name="raptors"></a>

Full tutorial here

Upvotes: 1

Related Questions