返回顶部按钮固定在页面某个位置,当页面滑动超过600时,显示此按钮,可用jq的scrollTop()方法实现;点击触发click事件,并返回到页面顶部,这里设置返回顶部的时间是1000ms(即1s),可用jq的animat()方法实现;
HTML:
<div class="backToTop"><img src="img/index/fanhui_top.png" /></div>
CSS:
/*返回顶部*/.backToTop{position: fixed;bottom: 55px;right: 0;}.backToTop:hover{cursor: pointer;}
JS:
<script type="text/javascript">$(function() {// 当页面向下滑动 600px 出现"返回顶部" 按钮$(window).scroll(function() {if($(window).scrollTop() > 600) {$('.backToTop').css('display', 'block');} else {$('.backToTop').css('display', 'none');}});// 点击按钮,返回页面顶部$(".backToTop").on("click", function() {$("html").animate({scrollTop: 0}, 1000)})});</script>
jq可在此下载:/zt/jquerydown.htm
如有错误或不足,欢迎各位大佬评论指正。