时间:2022-12-31 浏览量: 收藏
网站前端设计中使用锚点链接来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现平滑滚动效果。需要的页面引入以下代码即可:
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
//网站锚点链接平滑滚动
<script type="text/javascript">
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>RELATED RECOMMEND
Copyright © 2012-2024 世敏网络 版权所有 闽ICP备18026760号-1
闽公网安备 35020502000640号 网站地图 AI内容索引
关键词聚合