[英]Jquery - Scroll to data-id
我有一个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;
}
);
但是,我想要一个平滑的过渡(滚动)。
我已经尝试过调整各种stackoverflow解决方案-但到目前为止还没有运气。
看到这个 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.