效果
HTML
<div id="back-to-top" title="返回顶部"><i class="fa fa-chevron-up"></i></div>
style
<style> /*returnTop*/ div#back-to-top { font-size: 40px; position: fixed; display: none; bottom: 100px; right: 60px; cursor: pointer; } </style>
script
<script> $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 200) { $("#back-to-top").fadeIn(1000); } else { $("#back-to-top").fadeOut(1000); } }); //点击返回顶部 $("#back-to-top").click(function () { $(‘body,html‘).animate({ scrollTop: 0 }, 1000); return false; }); }); </script>
注意,要引入 font-awesome.css 才可显示图标
时间: 2024-08-28 03:59:37