有时候,在一个网页上,由于内容过多,高度很高,可以给该页面添加一个回到顶部的功能。
代码如下。
1、首先创建一个div,点击div时,让其回到网页的顶部。
<div class="rightFix"> <div class="back2Top">回到顶部</div> </div>
2、添加样式,固定到浏览器的右侧
<style type="text/css"> .rightFix{ top:300px; right:15px; position:fixed; z-index:1000; } </style>
3、引用JQuery,添加JQuery代码
<script type="text/javascript"> $(function(){ $(".rightFix").click(function(){ $("body,html").animate({scrollTop:0},500); }); $(window).scroll(function(){ if($(this).scrollTop()>300) {$(".rightFix").show();} else{$(".rightFix").hide();} }); }) </script>
时间: 2024-08-12 02:18:31