jquery+html+css坐标描点平滑滚动返回顶部和底部代码-小哥博客

HTML代码：

</div>

CSS代码：

<style>

.demo{ height:200px; width:100%; background:#55aaff; margin:10px 0;}

.location{ position:fixed; right:0; bottom:10px; width:60px; background:#0055ff; padding:5px; cursor:pointer;color:#ffffff};

</style>

jquery代码：

jQuery(document).ready(

function($){

$(window).load(function(){

$(‘.dingbutop’).click(

function(){

$(‘html,body’).animate({scrollTop: ‘0px’}, 1000);//数字越大滑动越慢

});

$(‘.chanpin’).click(function(){$(‘html,body’).animate({scrollTop:$(‘.zhengwen’).offset().top}, 1000);//数字越大滚动动越慢

});

$(‘.dibu’).click(function(){$(‘html,body’).animate({scrollTop:$(‘.bottom’).offset().top}, 1000);}); }); //数字越大滑动越慢

});

</script>

完整代码：

<title>js平滑滚动到描点指定地方+返回顶部返回底部</title>

<style>

.demo{ height:200px; width:100%; background:#55aaff; margin:10px 0;}

.location{ position:fixed; right:0; bottom:10px; width:60px; background:#0055ff; padding:5px; cursor:pointer;color:#ffffff};

</style>

</head>

<body>

</div>

jQuery(document).ready(

function($){

$(window).load(function(){

$(‘.dingbutop’).click(

function(){

$(‘html,body’).animate({scrollTop: ‘0px’}, 1000);//数字越大滑动越慢

});

$(‘.chanpin’).click(function(){$(‘html,body’).animate({scrollTop:$(‘.zhengwen’).offset().top}, 1000);//数字越大滚动动越慢

});

$(‘.dibu’).click(function(){$(‘html,body’).animate({scrollTop:$(‘.bottom’).offset().top}, 1000);}); }); //数字越大滑动越慢

});

</script>

</body>

</html>

修改说明：

代码中的jquery.js引用的是本站的链接，可不必修改，也可自行下载引用。
修改class值的时候注意要和下面jquery的值对应，否则不会生效。

版权声明 1 本网站名称：小哥博客
2 本站永久网址：https://bk.xg0839.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ147736299进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

免费资源

jquery+html+css坐标描点平滑滚动返回顶部和底部代码

HTML代码：

CSS代码：

jquery代码：

完整代码：

修改说明：

请登录后发表评论