Question

我创建了单页垂直滚动。当用户点击像＆＃34;关于＆＃34;它会滚动到那个位置。要记住的是，我使用高度为80px的固定标题。

以上示例有效。当我点击＆＃34;关于我们＆＃34;与锚＃34;关于＆＃34;它将滚动到ID为＆＃34; about＆＃34;的部分。没什么特别的。

但问题如下。当我说，我想将访问者导航到单页设计中的特殊位置。例如：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

问题摘要

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

这是我到目前为止可以理解的核心问题，我总结了这个问题，以供将来帮助。

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

首先，没有document.ready()范围。一切都在全球范围内宣布。那么你的函数在全局部分似乎没问题，但你的点击事件应该在document.ready()部分声明，以便jQuery正确地接受它们并启动它们。

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

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

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

<强> FYI

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

我起初认为这是IE漏洞，但事实并非如此。它应该有效like this example I made.，我无法进一步深入研究这个问题。这是你的时间。

OLD ANSWER

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

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

我测试了你的小提琴并且它有效。

请确保您的scrollToAnchor因参数空参数而未引发错误。 emptry字符串""和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 */
}

使用固定标题滚动到锚点位置

2 个答案: