Jquery-滚动到数据id

Jquery - Scroll to data-id

本文关键字：id 数据 滚动 Jquery-      更新时间：2023-09-26

我有一个div，它的数据参数'go'包含页面下方的div的id。例如：

<div data-go="help" data-info="">text</div>

目前，我可以使用以下代码跳转到div：

$("#icons > div").click(
    function() {
        input = $(this).data("go");
        window.location.hash = input;
    }
);

不过，我想要一个平滑的过渡（滚动到）
我尝试过调整各种堆叠式流量解决方案，但到目前为止运气不佳。

请参阅此JSFiddle:

JavaScript

$("#icons > div").click(
    function() {
        var id = $(this).data("go");
        $(document.body).animate({scrollTop: $("#" + id).offset().top, duration: 400});
    }
);

HTML

<div id="icons">
    <div data-go="help" data-info="">text</div>
</div>
<div id="help">
    <h1>
        Help section
    </h1>
</div>

获取目标元素的顶部偏移位置值，然后使用jQuery的animate函数为body:的scrollTop属性设置动画

var input = $(this).data("go");
jQuery(document.body).animate({
   scrollTop:jQuery("#"+input).offset().top+"px"
});

演示

$("#text").click(function() {    
    var input = $(this).data("go");
    var top = jQuery("#"+input).offset().top;
    jQuery(document.body).animate({
       scrollTop:top+"px"
    },1000);
});
#spacer {
  height:1500px;
}
#help {
  height:250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="text" data-go="help" data-info="">text</div>
<div id="spacer"></div>
<div id="help">Help</div>

相关文章：