Question

这是我的菜单结构：

HTML

<nav>
  <ul>
    <li><a href="#highlights">Highlights</a></li>
    <li><a href="/gallery">Gallery</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<div id="highlights">
  //some content inside for the highlights
</div>

jQuery

  $('a[href="#highlights"]').click(function() {
    $('html, body').animate({
        scrollTop: $("#highlights").offset().top
    }, 1000);
  });

通过这种方式，我可以平滑滚动到页面的特定部分（在本例中为“亮点”）。

它工作正常，但是当我输入联系页面时：

www.mywebsite.com/contact

，当我单击突出显示时，它不会返回首页，而只是将参数添加到URL：

www.mywebsite.com/contact#highlights

当然，因为突出显示在主页上。如果我做这样的重点链接：

<a href="/#highlights">Highlights</a>

它将转到主页和“突出显示”的特定部分，但是如果我现在再次单击“突出显示”菜单链接，则会中断平滑滚动。

有什么解决办法吗？

我试图像这样更改我的jQuery代码：

  $('a[href="/#highlights"]').click(function() {
    $('html, body').animate({
        scrollTop: $("/#highlights").offset().top
    }, 1000);
  });

但是它也不起作用。

编辑。我正在使用Laravel 5.5。

EDIT2：Gezzasa发布了一个绝妙的主意，我做了一些调整。

要正常工作，首页应该有一个附加的类，因此下一个jQuery代码应该可以正常工作。假设我要在首页上添加“ front”类，并使用Gezzasa的想法，这可以正常工作：

HTML

<nav>
  <ul>
    <li><a href="/#highlights" data-anchor="#highlights">Highlights</a></li>
    <li><a href="/gallery">Gallery</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<div id="highlights">
  //some content inside for the highlights
</div>

jQuery

  $('.front [data-anchor]').click(function(e) {
    e.preventDefault();
    var goToAnchor = $(this).attr("data-anchor");
    $('html, body').animate({
      scrollTop: $(goToAnchor).offset().top
    }, 1000);
  });

Answer 1

我通过更改几处来修复它。

我在名为data-anchor的标签上添加了一个数据参数。您可以随便叫它。

然后我将ID放在其中，这样我就可以完全忽略href并防止a标签的默认行为 <a href="#" data-anchor="#highlights">SmoothScroll</a>

然后，在加载dom后，我使用侦听器将click事件添加到元素。

https://jsfiddle.net/qf0duLb1/17/

现在，如果锚点在页面上，它将平滑滚动。

我希望我实际上已经回答了您的问题，否则我可能理解错了。那里可能有更好的解决方案。这对我有用。

jQuery平滑滚动并链接到另一个页面

1 个答案: