javascript - ScrollTo:定位导航栏中的特定按钮

Question

我为 WordPress 网站创建的导航栏出现问题。有些链接旨在向下滚动到主页上的不同位置，有些链接是指向网站其他位置的外部链接。像这样的事情:

<div class="main-navigation">
    <ul>
        <li class="link1"><a href="page1.html">Link 1</a>
        <li class="link2"><a href="#link2">Link 2</a>
    </ul>
</div>

基本内容。

因此，如果我在页脚中添加以下 Javascript...

jQuery(document).ready(function() {

jQuery('.main-navigation a' ).click(function(){
  jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
  return false;
});

链接 2 将向下滚动，但由于链接 1 不应该滚动，因此如果您单击它，则不会发生任何事情，就像它是空链接一样。

我想我可以将引用更改为类似的内容

jQuery('.main-navigation a.link2' ).click(function(){

因此只有链接 2 进行滚动，但这只会使其跳转到页面，就像 1990 年代的旧 anchor 标记技巧一样。

尝试了同一想法的几种变体，但没有任何效果。有人知道仅针对需要滚动的按钮的正确代码是什么吗？

Answer 1

根据itsgoingdown的答案构建。动画被忽略，因为默认链接事件仍然触发。如果您通过了该事件并阻止了默认事件，那么您就会被设置。见下文。

$(document).ready(function() {
    $('.main-navigation a[href^="#"]' ).click(function(event) {

        // Prevent default link action
        event.preventDefault();

        // Grab location to send to
        var href = $(this).attr('href');

        // Scroll the page, animated
        $('html, body').animate({
            scrollTop: $(href).offset().top  
        }, 700);

    });
});

这里还有一个实时的 JSFiddle 可以展示。 https://jsfiddle.net/y3nutj22/5/