Question

我已经看到了一些标准代码，用于使用＃顺畅滚动到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的插件，这就是为什么它以这种方式设置的原因。

Answer 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);
        });
    });

Answer 2

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

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;  
    });  
});

顺利滚动到名称

2 个答案: