Question

我有一个很大或者很小的问题。我正在尝试滚动我的网站，因此每个容器都会滑动到网站顶部的特定位置。但是，据我所知，存在一个问题，因为如果您单击第一个项目然后单击下一个项目，则脚本会滚动到相同位置，但如果您单击上一个项目上方的项目，则会滚动到页面底部。

我的脚本是一个简单的anchorscript，看看：

$("a.scrollForMe").each(function() {   // go through all links
var href = $(this).attr("href");
if (typeof(href) == "undefined") { return; }
if ($(this).attr("href").match(/^#/)) {   // if href starts with #
    $(this).click(function() {  // add a click event to it
        var name = $(this).attr("href").substring(1);  // get the anchor link

        // on click, scroll to the a with a name attribute matching the anchor
        $('html, body').animate({scrollTop: $("section[name='" + name + "']").offset().top - 420}, 1000);

        //alert ("This height is: " + $("section[name='" + name + "']").height() + " and it's name is " + name);
    });
}
});

如果你想看看它现在如何工作，请看看我的网站： http://1st-issue.de/2012/redaxo/#sec10

我希望你能帮助我！提前谢谢！

Answer 1

如果您使用此代码，可能会更好。我在保存页面上测试过。

$(document).ready(function() {
  $("a.scrollForMe").each(function() {   // go through all links
    var href = $(this).attr("href");
    if (typeof(href) == "undefined") { return; }
    if (href.match(/^#/)) {   // if href starts with #
      $(this).click(function() {  // add a click event to it
        var name = href.substring(1);  // get the anchor link

        // on click, scroll to the a with a name attribute matching the anchor
        $('html, body').animate({scrollTop: $("section[name='" + name + "']").prevAll("section").first().offset().top + 100 }, 1000);

        //alert ("This height is: " + $("section[name='" + name + "']").height() + " and it's name is " + name);
      });
    }
  });
});

如果我可以给你一个建议，你不应该使用href来锚定，因为屏幕会自动跳转到锚点。使用您添加的代码，屏幕会闪烁，因为浏览器会在执行scrollTop动画后转到相应的锚点。但这只是一个建议。

JavaScript滚动上下不可预测

1 个答案: