Created
February 26, 2016 03:12
-
-
Save hoanganh25991/f41d00d0b5c1a954d209 to your computer and use it in GitHub Desktop.
save scroll state
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>save scroll state</title> | |
| <style type="text/css" media="screen"> | |
| .single-post{ | |
| padding: 20px; | |
| margin: 20px 0; | |
| width: 300px; | |
| height: 400px; | |
| background-color: red; | |
| border: 1px dashed grey; | |
| } | |
| .container{ | |
| padding: 20px; | |
| border: 1px dashed grey; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <?php $count = 0; ?> | |
| <div class="single-post"> | |
| <h1><a href="post.html">#page-1: post <?php echo ++$count; ?></a></h1> | |
| </div> | |
| <div class="single-post"> | |
| <h1><a href="post.html">#page-1: post <?php echo ++$count; ?></a></h1> | |
| </div> | |
| <div class="single-post"> | |
| <h1><a href="post.html">#page-1: post <?php echo ++$count; ?></a></h1> | |
| </div> | |
| <div class="single-post"> | |
| <h1><a href="post.html">#page-1: post <?php echo ++$count; ?></a></h1> | |
| </div> | |
| <div class="single-post"> | |
| <h1><a href="post.html">#page-1: post <?php echo ++$count; ?></a></h1> | |
| </div> | |
| <div class="single-post"> | |
| <h1><a href="post.html">#page-1: post <?php echo ++$count; ?></a></h1> | |
| </div> | |
| <div class="single-post"> | |
| <h1><a href="post.html">#page-1: post <?php echo ++$count; ?></a></h1> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>post</title> | |
| </head> | |
| <body> | |
| <h1>#page-2: post</h1> | |
| <p>I want to implement a functionality wherein on clicking the back button, i come back to the same position. A good example may be http://www.jabong.com/men/clothing/mens-t-shirts/ . Here, if you scroll down and hit on a product, and click back from the product page, you reach the same position of the page where that product is. | |
| The example shown here doesn't append anything in the url to remember the position. Also, it doesn't use pushstate or history.js (not loading through ajax). | |
| Any insights into how I can do this? | |
| EDIT: Im using infinite scrolling pagination (like pinterest), and the pages keep loading on scrolling down. When I go back, the query runs again and reloads the page. If I was on the 4th page before, after going back, the pages don't load until page 4 and so there's a break, thus I cant reach that position. | |
| So my question is how do I do this with infinite scrolling?</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment