顺利滚动到名称

时间:2014-12-08 05:57:41

标签: jquery wordpress

我已经看到了一些标准代码,用于使用#顺畅滚动到href,但我正在通过name属性进行锚定链接。所以代码就像这样:

<li>
    <a href="#on-water">On Water</a>
  </li>

转到以下部分:

<a class="mwm-aal-item" name="on-water"></a>

这是一个名为Better Anchor Links for wordpress的插件,这就是为什么它以这种方式设置的原因。

2 个答案:

答案 0 :(得分:1)

DEMO HERE

$(document).ready(function(){
    $('li > a').on('click', function(){
        $('html,body').animate({scrollTop : $('.mwm-aal-item').offset().top},3000);
    });
});

前面的示例,如果您运行特定锚的代码..   -

但是如果你想用所有锚点运行它  使用此DEMO HERE

$(document).ready(function(){
        $('li > a').on('click', function(){
            var GetaName = $(this).attr('href').split('#');
            $('html,body').animate({scrollTop : $('a[name ='+GetaName[1]+']').offset().top},1000);
        });
    });

答案 1 :(得分:0)

如果我理解正确 - 你想实现这个目标:

http://jsfiddle.net/ywt5a6dn/

$(document).ready(function() {  
    $('a[href^="#"]').click(function() {  
        var target = $(this.hash);  
        if (target.length == 0) target = $('a[name="' + this.hash.substr(1) + '"]');  
        if (target.length == 0) target = $('html');  
        $('html, body').animate({ scrollTop: target.offset().top }, 700);  
        return false;  
    });  
});