javascript - 使用 URL 中的哈希触发点击后，页面需要滚动到顶部

Question

我正在调用一个在 url 中包含哈希值的页面，以便在浏览器中提交该页面时，会单击具有哈希 ID 的元素。它工作正常，但我需要页面在单击后立即滚动到顶部。我尝试过: $(window).scrollTop(0);但它似乎只有在页面已经加载时才有效。

这是 JavaScript:

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

当我有一个类似 http://www.example.com#part2 的网址时并在浏览器中运行它，带有哈希 #part2 的元素被正确单击，但页面滚动到该元素。我希望在单击元素后页面滚动到页面顶部。

您知道如何滚动到顶部或单击“不滚动”到开始的元素吗？

我尝试过 setTimeout 函数和 $(window).scrollTop(0);但在点击和页面加载后它们似乎不起作用。

$(窗口).scrollTop(0);当我在页面加载后在 chrome 控制台中手动运行它时，它就可以工作。

看起来像 $(window).scrollTop(0);由于某种原因被忽略。

Answer 1

我认为你想做这样的事情，看看这个 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()
});

页面重新加载时滚动顶部

检查JS fiddle这里

代码

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

  })