Question

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

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

我做错了什么？让他们知道上述内容是否有意义。

这是我的菜单栏锚：

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

这是我在主页上的jQuery片段：

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酒吧。似乎是在加载时将我的页面滚动到顶部。我该如何防止冲突？即仅在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);
});

Answer 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;
        });

    }
});

Answer 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);
  });
}

然后，如果没有提供哈希标记，它只会执行滚动。

链接到另一个页面（通过URL Hashtag），然后滚动到Element

2 个答案: