Jquery：当#ID位于url末尾时，页面出现时该元素位于浏览器屏幕的顶部，我们可以使其滚动到#ID元素吗？

Question

转到我在问题末尾链接的页面，将您发送到 stackoverflow 主页面，但浏览器不会显示页面顶部，它会查找 #h-recent-badges 元素并在该元素位置开始查看页面。

是否可以做到这一点，如果有人通过文章底部评论之一的链接访问我的网站，该人将从页面顶部开始，然后向下滚动到 #ID ，而不是仅仅出现在#ID 处？

当点击页面上的锚链接时，我可以使页面滚动到#ID，但我说的是当有人来自谷歌并带有指向元素#ID 的链接时。

https://stackoverflow.com/#h-recent-badges

Answer 1

查看 jquery 查询字符串插件：
http://plugins.jquery.com/project/query-object

最新版本有哈希参数解析。

你想要做的是在页面加载后获取哈希参数，然后执行类似的操作
$.scrollTo($("#" + hashValue)).

查看http://flesler.blogspot.com/2007/10/jqueryscrollto.html 获取scrollTo 教程。

Answer 2

我在这里可能是错的，但我相信这种浏览器行为取决于网站加载的速度...

例如，如果我的连接速度较慢，则需要一些时间才能将其加载到可用评论的程度 -只有这样它才能移动到它们（不是在它们实际出现在页面上之前）

您仍然可以尝试使用 jQuery 的 scrollTo 插件 在页面加载时尝试手动滚动页面（可能使用 PreventDefault？）

Answer 3

$(document).ready(function() { 
    if(document.URL.indexOf('#') > 0){
       var link = document.URL.split('#');
       scrollId('#'+link[1])
    }
});
$(window).on('hashchange', function(e){
   if(document.URL.indexOf('#') > 0){
       var link = document.URL.split('#');
       scrollId('#'+link[1])
    }
});

function scrollId(id)
{     
    setTimeout(function(){
        $('html, body').animate({scrollTop: $(id).offset().top - 0 }, 'slow');  
    },500);
}