locked
Changing the browser-URL by scrolling down. RRS feed

  • 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