1

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

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

$("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

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

4

1 回答 1

0

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

$(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 动画。但这只是一个建议。

于 2012-09-14T09:53:19.630 回答