Question

我正在构建一个wordpress页面，并将登陆页面分为几个部分，我希望通过使用jQuery函数为跳转设置动画来平滑滚动到该部分。

为此，我使用固定的标题导航，指向适当的锚点：

<div class="nav-fold nav-fold-hide">
    <ul>
        <li><a id="scrolltop" href="<?php echo home_url(); ?>#scrolltop">Home.</a></li>
        <li><a id="scrollabout" href="<?php echo home_url(); ?>#scrollabout">About.</a></li>
        <li><a id="scrollwork" href="<?php echo home_url(); ?>#scrollwork">Work.</a></li>
        <li><a id="scrollbot" href="<?php echo home_url(); ?>#scrollbot">Contact.</a></li>
    </ul>
</div>

这些锚点如下所示：

<div class="base-headline">
    <a name="scrollwork"><h2>WORK.</h2></a>
</div>
<div class="base-work"> some content </div>

要使其平滑滚动的jQuery是这个（从此处的另一个问题中得出）：

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');

}
function smoothScroll() {
    $("#scrollwork").click(function(){
        scrollToAnchor('scrollwork');
    });
};

现在，只要我在着陆页上（锚点指向），此功能就可以完全按要求运行，但是，如果我在另一页上并单击导航，它将仅返回到着陆页，但保持正确在顶部而不向下滚动。

我（还有许多其他人）尝试过this答案，但是只有当我来自另一个页面时，它才会滚动，如果单击主页（着陆）页面上的链接，则不会发生任何事情。

无论我来自哪里，如何都能平滑滚动到目标网页上的锚点？

编辑：所以我设法使它工作得更好一些，但仍然没有达到预期目的：

首先，我删除了导航项的ID，并将其放在目标锚点上（我猜这就是评论中提到的奇怪的小滚动条的来源）。其次，我在所有导航链接中添加了一个类，以便更轻松地定位它们。

此外，我对jQuery代码做了一些更改：

// smooth scroll
function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},'slow');

}

function smoothScroll() {
    $(".opsg_smoothscroll").click(function(){
        var opsg_target = $(this).attr('href').split('#');
        console.log( "hash =" + opsg_target)
        scrollToAnchor(opsg_target.toString().substring(1));
    });

};

现在无论我来自哪里（显然在页面内），它都将显示着陆页的相应部分。不幸的是，到目前为止，我仍然无法摆脱一些错误：

它不会滚动，而只会加载到锚点的位置
在切换回登录页面并显示其指向的部分之前，它引发“无法读取未定义的属性'top'的错误”

我不知道第二个错误是从哪里来的，但是我猜第一个错误是因为我改变了页面，因此偏移立即被放置了而不是被动画化了吗？

平滑滚动以锚定在相同或不同页面上（jQuery）

0 个答案: