返回顶部按钮效果实现
程序员文章站
2023-12-23 17:11:52
HTML:button按钮也可以 css: js: ......
html:button按钮也可以
<div class="return top_btn ng-scope" style="display: block;"></div>
css:
.return { position: fixed; right: 2%; bottom: 4.6%; width: 48px; height: 48px; background: url(../images/up_top@2x.png); background-size: 100% 100%; cursor: pointer; }
js:
$(document).ready(function () { $(".top_btn").hide(); $(function () { $(window).scroll(function () { if ($(window).scrolltop() > 100) { $(".top_btn").fadein(1500); } else { $(".top_btn").fadeout(1500); } }); //当点击跳转链接后,回到页面顶部位置 $(".top_btn").click(function () { $('body,html').animate({ scrolltop: 0 }, 1000); return false; }); }); });