Question

我有一个网址，例如的 www.website.com/#divIdToScrollTo

问题：

我想要的是页面加载，后面的＃将被提取[已经被提到作为目标div的id。]。当页面完全加载时，页面应首先保持在顶部，然后平稳地开始向div滚动，持续时间为5秒。

目前的做法：

   var elem = $('#_' + window.location.hash.replace('#', ''));
    if(elem) {

         $('html, body').animate({
            scrollTop: $( elem ).offset().top
        }, 5000);
    }

我当前的解决方案从网址中提取id，并且页面加载直接出现在目标div上。我无法看到任何平滑的滚动。

那么，我可以实现我在这里寻找的平滑滚动吗？请分享您的想法。[ WITH CODE ]

Answer 1

您可能必须考虑使用url参数而不是散列片段。如果您正在使用URL上的片段加载页面，我相信它会自动跳转到内容中的该ID，我不确定您是否可以阻止它。通过运行类似的方式可能有一种hacky方式：

$(document).ready(function(){
    // in order to "reset" back to the top
    $("html, body").scrollTop(0); 

   // and THEN run your animate scroll function here. 
});

否则，我提到的URL参数方法，您的URL将如下所示：

www.website.com/?section=aboutMe

然后在你的代码中：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"); 
    var results = regex.exec(location.search);

    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var section = getParameterByName("section"); 

 $('html, body').animate({
        scrollTop: $( "#" + section ).offset().top
 }, 5000);

从此线程中抓取getParameterByName函数：How can I get query string values in JavaScript?

如何从顶部顺利滚动到具有在url中提到的id的特定div

1 个答案: