CODEWITHSUNDEEP
javascriptjqueryhash
adjc98
adjc98

Reputation: 47

After trigger click using a hash in the URL the page needs to scroll to top

I am calling a page with a hash in the url so that when it is submitted in the browser the the element with the hash id is clicked. It works fine, but I need the page to immediately scroll to the top after the click. I have tried: $(window).scrollTop(0); but it only seems to work if the page is already loaded.

Here is the Javascript:

<script type="text/javascript">
var thisHash = window.location.hash;
$(document).ready(function()
{
if(window.location.hash)
 {
  $(thisHash).trigger('click');
 }
  }); 
 </script>

When I have a url like http://www.example.com#part2 and run it in the browser the element with the hash #part2 is clicked correctly, but the page is scrolled to the element. I would like the page to be scrolled to the top of the page after the element is clicked.

Do you know a way to scroll to the top afterward or have the click "not scroll" to the element to start with?

I have tried the setTimeout function and $(window).scrollTop(0); but they don't seem to work after the click and the page load.

$(window).scrollTop(0); works when I manually run it in the console of chrome after the page is already loaded.

It seems like the $(window).scrollTop(0); gets ignored for some reason.

Upvotes: 0

Views: 1240

Answers (2)

Vitorino fernandes
Vitorino fernandes

Reputation: 15951

I think you want to do something like this check out this js fiddle

JSFiddle

code

function scrollnav(){

    $('#nav a[href^="#"]').on('click',function (e) {
        e.preventDefault();

          var target = this.hash,
          $target = $(target);

          $('html, body').stop().animate({
            'scrollTop': $target.offset().top
            }, 1000, function () {
                window.location.hash = target;
            });
        });


    var aChildren = $("ul#nav li").children(); // find the a children of the list items
    var aArray = []; // create the empty aArray

        for (var i=0; i < aChildren.length; i++) {    
            var aChild = aChildren[i];
            var ahref = $(aChild).attr('href');
            aArray.push(ahref);
        }

    var windowPos = $(window).scrollTop(); // get the offset of the window from the top of page

    for (var i=0; i < aArray.length; i++) {
        var theID = aArray[i];
        var divPos = $(theID).offset().top; // get the offset of the div from the top of page
        var pos = $("a[href='" + theID + "']").parent();

            if (windowPos >= divPos ) {
                    $("ul#nav li").removeClass("active");
                    $(pos).addClass("active");

                    var finder = $("ul#nav li.active").index();
                    size =$('ul#nav li').width();

                    var onclick = finder * size;
                        $('span').css('left', onclick + 'px');
                    }
            }
    }




$(window).scroll(function() { 

    scrollnav()
});

scroll top on page reload

Check JS fiddle here

code

 $(window).load(function(){
     //alert("scroll")
     $('html, body').stop().animate({
            'scrollTop': 0
            }, 1000)

  })

Upvotes: 1

noru
noru

Reputation: 526

Try

window.scroll(0, 0); // X, Y

or

window.scrollBy(0, -document.body.scrollTop)

Upvotes: 0

Related Questions