Jquery：当 #ID 在 url 的末尾时，页面出现在浏览器屏幕顶部的元素，我们可以让它滚动到 #ID 元素吗？答案

【问题标题】：Jquery: When an #ID is at the end of a url, the page appears with the element at the top of the browser screen, can we make it scroll to #ID element?Jquery：当 #ID 在 url 的末尾时，页面出现在浏览器屏幕顶部的元素，我们可以让它滚动到 #ID 元素吗？
【发布时间】：2011-02-01 07:39:43
【问题描述】：

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

是否有可能做到这一点，如果有人通过文章底部的某个 cmets 的链接访问我的网站，它会在页面顶部启动该人，然后向下滚动到#ID，而不是仅仅出现在#ID？

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

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

【问题讨论】：

标签： jquery scrolltop

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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);
}

【讨论】：