Answered by:
Changing the browser-URL by scrolling down.

Question
-
User944339287 posted
Hi guys..
I have search over the internet and found that the following code is able to change browser-URL by scrolling down my page.
window.history.pushState(“object or string”, “Title”, “/new-url”);
For a demo, you can take a look at the Webby Awards, where this method is used. Just scroll up or down and look at the address bare. The effect is pretty impressive.
Question.
1) How can i create a simple page like this? Anyone can give me some clues how to apply this method to my site?
Below is my sample code to execute pushState by clicking a button... but how can i execute it by scroll down a page?
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/jscript" src="http://code.jquery.com/jquery-1.8.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#btnPushState").click(function() { window.history.pushState("state", "title", "messages/mscansozeri"); }); }); </script> </head> <body> <button id="btnPushState">Push State</button> </body> </html>
Saturday, March 28, 2015 6:44 AM
Answers
-
User1508394307 posted
Suppose you want to change the url based on currently visible container
Add this to html
<div id="div1" style="height:500px">div1</div> <div id="div2" style="height:500px">div2</div> <div id="div3" style="height:500px">div3</div> <div id="div4" style="height:500px">div4</div>
js part
function isScrolledIntoView(elem) { var $elem = $(elem); var $window = $(window); var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } $(window).scroll(function() { if (isScrolledIntoView("#div1")) { window.history.pushState("state", "title", "/div1"); return; } if (isScrolledIntoView("#div2")) { window.history.pushState("state", "title", "/div2"); return; } if (isScrolledIntoView("#div3")) { window.history.pushState("state", "title", "/div3"); return; } if (isScrolledIntoView("#div4")) { window.history.pushState("state", "title", "/div4"); return; } });
The isScrolledIntoView() is just an example of a function that returns visibility. You could do that in different ways, e.g. using plugins - see here.
So, based on that function you could check if container is visible and if true, change url.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, March 28, 2015 7:25 AM -
User1508394307 posted
In jquery you could use scrollTop() function to return current position
$(window).scroll(function() { var height = $(window).scrollTop(); if(height > some_number) { // change url here } });
where if(height > some_number) is your condition. e.g. if(height == 0) or if(height <= 400)
jquery does not create urls on server so no surprise that http://localhost:54286/div2 does not work. You need to handle it on asp.net level - create routing or url rewrite if that page does not exist.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Sunday, March 29, 2015 4:35 AM
All replies
-
User1508394307 posted
Suppose you want to change the url based on currently visible container
Add this to html
<div id="div1" style="height:500px">div1</div> <div id="div2" style="height:500px">div2</div> <div id="div3" style="height:500px">div3</div> <div id="div4" style="height:500px">div4</div>
js part
function isScrolledIntoView(elem) { var $elem = $(elem); var $window = $(window); var docViewTop = $window.scrollTop(); var docViewBottom = docViewTop + $window.height(); var elemTop = $elem.offset().top; var elemBottom = elemTop + $elem.height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } $(window).scroll(function() { if (isScrolledIntoView("#div1")) { window.history.pushState("state", "title", "/div1"); return; } if (isScrolledIntoView("#div2")) { window.history.pushState("state", "title", "/div2"); return; } if (isScrolledIntoView("#div3")) { window.history.pushState("state", "title", "/div3"); return; } if (isScrolledIntoView("#div4")) { window.history.pushState("state", "title", "/div4"); return; } });
The isScrolledIntoView() is just an example of a function that returns visibility. You could do that in different ways, e.g. using plugins - see here.
So, based on that function you could check if container is visible and if true, change url.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Saturday, March 28, 2015 7:25 AM -
User944339287 posted
Hi Smirnov,
Thanks!! It's exactly what i want.
May i have two more questions on this function?1) change browser-url when hit top of the page. (or certain height)
2) [The resource cannot be found] when i refresh/enter http://localhost:54286/div2 at browser address bar.
and i have tried to use windows.history.replaceState but only the url changed but never go to div2 when button clicked.
* my ideal situation is div2 will be display accordingly when localhost:52867/div2 is entered on the browser address bar.<script type="text/javascript"> $(document).ready(function () { $("#btnReplaceState").click(function () { window.history.pushState("div2", "title", "/div2"); }); }); </script>
reference image for question 1:
Saturday, March 28, 2015 8:14 PM -
User1508394307 posted
In jquery you could use scrollTop() function to return current position
$(window).scroll(function() { var height = $(window).scrollTop(); if(height > some_number) { // change url here } });
where if(height > some_number) is your condition. e.g. if(height == 0) or if(height <= 400)
jquery does not create urls on server so no surprise that http://localhost:54286/div2 does not work. You need to handle it on asp.net level - create routing or url rewrite if that page does not exist.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Sunday, March 29, 2015 4:35 AM