当我单击按钮时,我希望能够向下跳转或滚动到页面上的特定 div 或目标。
$('#clickMe').click(function() {
//jump to certain position or div or #target on the page
});
我怎样才能做到这一点?
我会将链接样式设置为看起来像按钮,因为这样就存在无 js 后备。
这就是使用 jquery 制作跳跃动画的方法。 No-js 后备是没有动画的正常跳转。
原始示例:
jsfiddle
$(document).ready(function() {
$(".jumper").on("click", function( e ) {
e.preventDefault();
$("body, html").animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 600);
});
});
#long {
height: 500px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Links that trigger the jumping -->
<a class="jumper" href="#pliip">Pliip</a>
<a class="jumper" href="#ploop">Ploop</a>
<div id="long">...</div>
<!-- Landing elements -->
<div id="pliip">pliip</div>
<div id="ploop">ploop</div>
新例子链接的实际按钮样式,只是为了证明一点。
一切本质上都是一样的,除了我改变了班级.jumper
to .button
我添加了 css 样式以使链接看起来像按钮。
Button styles example
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)