jQuery返回顶部【简洁好用】

来源:互联网 发布:老板烟机淘宝和实体店 编辑:程序博客网 时间:2024/05/18 01:46

网页内容竖向超过一屏显示时,一般为了用户体验,会在页面的右边或者右下角显示一个返回顶部的按钮,以便浏览。
效果如下:
返回顶部
html页面

<div class="fanhuiTop">        <a href="javascript:;" title="返回顶部" id="gototop" style="display: block;"><img src="*****/public/images/go_top.png" width="48" height="48"></a></div>

css样式

.fanhuiTop{    min-height:48px;    line-height:48px;    padding:10px 0;    bottom: 10px;right: 15px;}.fanhuiTop span{     height:25px;     font-size:14px;     display:inline-block;    float:left;}.fanhuiTop a{     height:48px;     float:right;}

jQuery

<script language="javascript">    $(document).ready(function(e) {        //垂直滚动时显示“返回顶部”        $(window).scroll(function(e) {            var scrolltop = $(document).scrollTop();            //显示或隐藏“返回顶部”按钮            if(scrolltop>0){                $('#gototop').show();            }else{                $('#gototop').hide();            }        });        //点击“返回顶部”按钮效果        $('#gototop').click(function(e) {            $("html, body").animate({ scrollTop: 0 }, 300);        });    });    </script>