滚动到带有固定标题的锚点位置

Question

我创建了一个单页垂直滚动。 当用户点击像“about”这样的锚点时，它会滚动到那个位置。 需要记住的是，我使用了一个高度为 80px 的固定标题。

上面的例子有效。 当我用锚点“about”点击“about us”时，它会滚动到id为“about”的部分。 没什么特别的。

但问题如下。 当我说，我想将访问者导航到单页设计中的一个特殊位置。 例如像这样：www.mydomain.com/#about - 当输入上面的 URL 时，它应该直接滚动到那个位置。 但这我不能得到工作。 我不知道如何解释这一点，因为有很多场景发生在我身上。 就像它会直接滚动到底部页面，或者它不会滚动到特定于该部分，它会停止到很晚，或者位置不减去导致固定标题与该部分内容重叠的标题。 重要的是target位置减去固定标题。

除此之外，我认为我在某些部分使用了不必要的代码。 一些关于如何改进我的代码的建议也很好。

您可以在此处找到工作代码

代码：我的代码的第一部分。 这里我控制点击功能。 当用户点击#primary-navwrapper内的链接时，它应该执行该功能。 将询问的哈希链接存储在anchorId并将其设置为 scrollToAnchor 函数。 然后它通过固定标头减少该哈希的位置（因此标头不会与内容重叠）。 并使用当前的 anchorId 更新哈希。

// An offset to push the content down from the top
    var offset = $('#header').outerHeight();


    // Navigation click action
    // Scroll to # HASH ID
    $('#primary-navwrapper li a[href^="#"]').click(function(event) {

        // Prevent from default action to intitiate
        event.preventDefault();

        // The id of the section we want to go to
        var anchorId = $(this).attr('href');

        scrollToAnchor(anchorId);

        return false;
    });


    function scrollToAnchor(anchorId) {

    // Our scroll target : the top position of the section that has the id referenced by our href
    var target = $(anchorId).offset().top - offset;
    //console.log("target" + target);

    // The magic...smooth scrollin' goodness.
    $('html, body').animate({ scrollTop: target }, 500, function () {
        //window.location.hash = '!' + id;
        window.location.hash = anchorId;
    });

}

有人对此有解决方案或一些建议。 注意你的答案。

卡斯帕

Answer 1

更新的答案

这是工作代码jsFiddle

---

问题总结

1. 当用户单击其中一个菜单时，屏幕将移动到内容部分，但它离标题太近了。 内容区域和我的标题之间应该有空格。
2. 当用户使用“#aboutus”等查询字符串进入我的主页时，我需要将屏幕移动到预期的内容部分

这是你目前我能理解的核心问题，我为你未来的帮助者总结了这一点。

我彻底检查了您的代码，发现了一些无法为您带来预期结果的因素。

首先，没有document.ready()作用域。 一切都在全局范围内声明。 好吧，您的函数在全局部分似乎没问题，但是您的单击事件应该在document.ready()部分中声明，以便jQuery正确获取它们并初始化它们。

出于这个原因，您的原始代码在向下滚动到预期部分时不会产生动画，因为它是浏览器的默认行为href=# ，而不是您的点击事件。 所以我添加了一些代码来确保事件调用。

其次，当您的 url 具有查询字符串（如#gallery, #aboutus, and etc时，您没有任何方法可以滚动到预期的内容部分。 所以我为此放了一些代码

请在脚本表上找到我的 ID，然后它会找到我新添加或编辑现有代码的确切点。 我评论了很多

---

供参考

有一件事我想不通。 您的代码应该可以很好地工作，但 IE 的滚动方式不同。 由于您在单击事件上使用event.preventDefault() ，因此href=#something的默认滚动操作href=#something应该起作用。 但它在 IE 中执行行为，而 chrome 显示预期结果。 （我在这里告诉您的是为粘性标题留出空间的任务）

起初我以为这是 IE 的错误，但事实并非如此。 它应该像我制作的这个例子一样工作。 好吧，我不能再深入研究这个问题了。 是你的时候了。

---

旧答案

在这种情况下，您需要获取查询字符串并让您的scrollToAnchor在$(document).ready()点获取它。

var queryString = window.location.hash;    
scrollToAnchor(queryString);

我在你的小提琴上测试过，它有效。

并且请确保您的scrollToAnchor不会因为参数为空而引发错误。 空字符串""和null对象会导致scrollToAnchor出现错误

放置这样的保护措施。

function scrollToAnchor(anchorId) {
    if ( anchorId == null || anchorId == "" ) {
        return false;
    }
    .
    .

但是，当用户输入错误的查询字符串（如#avoutus中不存在的#avoutus ，此保护措施也无法防止错误。 所以我建议你避免$(anchorId).offset().top - offset; 这种代码。

直接通过这样的动态变量选择一个元素不能保证一个安全的对象，除非它们完全在你的控制之下。

Answer 2

这对我有用。

html {
  scroll-padding-top: 70px; /* height of sticky header */
}