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

Question

我创建了一个单页垂直滚动。当用户单击“关于”之类的锚点时，它将滚动到该位置。 需要记住的是，我使用高度为 80 像素的固定标题。

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

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

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

A working code you can find here

代码： 我的代码的第一部分。这里我控制点击功能。当用户单击#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=# 的浏览器默认行为，而不是您的点击事件。所以我添加了一些代码来保证事件的调用。

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

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

---

仅供参考

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

起初我以为这是 IE 错误，但事实并非如此。它应该可以工作like this example I made.，我不能再深入研究这个问题了。时间到了。

---

老答案

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

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

我在你的小提琴上进行了测试，它可以工作。

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

设置这样的保护措施。

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

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

通过此类动态变量直接选择元素并不能保证对象是安全的，除非它们完全在您的控制之下。

Answer 2

这对我有用。

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