javascript - 滚动到页面上值 = 'x' 的位置

Question

我想在我的页面顶部有一个链接，例如:-

<a href="#" id="example">Scroll to</a>

基本上我想做以下事情:-

当点击 #example 时，我希望它滚动到页面上 h1 value = 'test' 的位置:-

$('#example').bind('click',function() {

    // GO TO LOCATION ON PAGE WHERE h1 value ='test' ( <h1> = 'test' </h1> )

});

这可以做到吗？

我知道我可以为此使用 anchor ，但我使用的菜单插件没有添加这个，所以我需要根据值是什么，因为这是不同部分之间唯一唯一的东西。

Answer 1

使用 .filter() 查找目标元素方法，然后使用其 .offset() (查找其在文档中的位置)和 .animate()页面的 scrollTop 属性

$('#example').bind('click',function(e) {
    e.preventDefault();

    var target = $('h1').filter(function(){ return $(this).text() == 'test' ;});

    $('html,body').animate( {
        scrollTop: target.offset().top
    });

});

演示地址:http://jsfiddle.net/Lc8gg7pm/1/