链接到另一个页面（通过 URL Hashtag），然后滚动到元素答案

【问题标题】：Linking to another page (via URL Hashtag), then Scroll to Element链接到另一个页面（通过 URL Hashtag），然后滚动到元素
【发布时间】：2019-09-04 20:36:51
【问题描述】：

所以我有一个主页菜单栏，它有一个“功能”锚链接。我的功能部分实际上在同一页面上。因此，当用户单击“功能”链接时，我有一个 jQuery 函数可以将它们向下滚动到页面的该部分。这可以正常工作。

我的问题是，如果我在另一个使用相同菜单栏的单独页面（例如 /contact-us）上，如果我单击“功能”显然不会发生任何事情。所以我写了这段代码。它会查找 URL `http://website.com/#features'，然后应该滚动到该 DIV - 它会简短地执行此操作。问题是，一旦页面完全加载，页面就会回到顶部。

我做错了什么？让他们知道以上是否没有意义。

这是我的菜单栏锚点：

<a href="/#features">FEATURES</a></span>

这是我在主页上的 jQuery sn-p：

home: function () {
    if (document.location.href.indexOf('#features') > 0) {
        $('html, body').animate({
            scrollTop: ($('section.feature-set').eq(1).offset().top - 60)
        }, {
            duration: 1000,
            easing: 'easeInOutExpo'
        });
        return false;
    }
}

*编辑*

所以这不是我的 js 代码，而是这个 js 块。这隐藏了 iphone safari 栏。似乎在加载时将我的页面滚动到顶部。我怎样才能防止冲突？ IE。仅在 iPhone 上运行此块，但也不与我的标签 URL 冲突

// Hides Safari Address Bar on iPhone
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});

【问题讨论】：

你把你的代码放在 $(document).ready(function(){ ... }); ?
是的，$(function (){ });
刚刚弄清楚它是什么...请参阅我对帖子的编辑。新问题...
你用的是什么浏览器？都在吗？
旁注：如果你只关心那部分，你应该使用window.location.hash（而不是在整个位置使用indexOf）。

标签： javascript jquery

【解决方案1】：

我假设您的页面中已经加载了 jQuery 库，您可以在此处更改滚动间隔。它对我有用。

jQuery(window).ready(function(e){

    // Remove the # from the hash
    var loadTarget = location.hash.replace('#','');

    if(loadTarget != ''){

        var $loadTarget = jQuery('#' + loadTarget);
        jQuery('html, body').stop().animate({
                'scrollTop': $loadTarget.offset().top
            }, 1000, 'swing', function() {

            window.location.hash = '#' + loadTarget;
        });

    }
});

【讨论】：

【解决方案2】：

我假设代码来自像 jQuery mobile 这样的库？无论哪种方式，您都可以将其修改为仅在没有来自 URL 的方向时才起作用：

if (window.location.hash.length == 0){
  // Hides Safari Address Bar on iPhone
  window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
      // Hide the address bar!
      window.scrollTo(0, 1);
    }, 0);
  });
}

那么它只会在没有提供哈希标签的情况下执行滚动。

【讨论】：