回到顶部按钮

这个回到顶部按钮大家到处都可以看到,今天终于自己做了一个,分享给大家

css样式

<style type="text/css">
#go_top {
            display: none;
            position: fixed;
            width: 40px;
            bottom: 25px;
            padding: 10px 8px;
            color: #666;
            background: #ECECEC;
            cursor: pointer;
            font: 24px/12px Helvetica,Arial,Verdana,sans-serif;
            opacity: 0.7;
            outline: 0 none;
            text-align: center;
            text-decoration: none;
            text-shadow: 0 0 1px #DDD;
            vertical-align: baseline;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }
</style>

jquery代码

<script>
$(document).ready(function(){
        $(function () {
            //检测屏幕高度
            var height=$('.row-fluid').offset().top;
            //scroll() 方法为滚动事件
            $(window).scroll(function(){
                if ($(window).scrollTop()>height){
                    $('#go_top').show();
                }else{
                    $('#go_top').hide();
                }
            });
            $("#go_top").click(function(){
                $('body,html').animate({scrollTop:0},100);
                return false;
            });
        });
    });
</script>

html部分

<div id="go_top" style="right:20px;">
        <p></p>
</div>

效果图

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值