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年代的旧锚标签一样跳转到页面。

尝试了同一个想法的一些变体，没有点击任何内容。任何人都知道什么是正确的代码只针对需要滚动的按钮？

Answer 1

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

$(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/

Answer 2

感谢你们两位。我终于明白了，从某种意义上说，你是对的。但是，您的代码都没有产生scrollTo效果。虽然'.main-navigation a [href ^ =“＃”]'部分正确，但是我的问题......我终于在今天早上意识到了......我在WordPress菜单功能的URL中硬编码为一个完整的URL。所以只使用'＃'是行不通的。另外，由于它是WP，我不能在代码中使用$，当然不要使用jQuery。

这是诀窍的代码。

 jQuery(document).ready(function() {

jQuery('.main-navigation a[href^="http://path.to.url/#"]' ).click(function(){
  jQuery.scrollTo( this.hash, 1000, { easing:'swing' });
  return false;
});

当然，

使用path.to.url表示实际的URL。

再次感谢！

ScrollTo：定位导航栏中的特定按钮

2 个答案: