zoukankan      html  css  js  c++  java
  • jQuery返回顶部(精简版)

    jQuery返回顶部(精简版)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery返回顶部</title>
        <style>
        *body{ background-attachment: fixed; background-image: url(about:blank); /* 必须的,防抖动 */}
        *body #toTop{ position: absolute; top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-10)); /* 底部固定悬浮 */}
        #toTop{ display: none; position: fixed; border: 1px solid red; right: 10px; bottom: 10px; padding: 10px 0; cursor: pointer;}
        </style>
    </head>
    <body style="height:3000px;">
        <div id="toTop"> scroll to top</div>
        
        <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script>
        <script>
        $(function(){
            var toTop = $('#toTop');
    
            // 当窗口滚动条滚动时触发
            $(window).scroll(function(){
                var st = $(window).scrollTop();        //获取浏览器窗口向上滚动的距离
                
                // 选项卡标签栏/控制台调试代码
                // document.title = $(window).scrollTop();
                // console.log($(window).scrollTop());
    
                // 判断向上滚动距离是否大于500
                if(st<500){
                    toTop.fadeOut('fast');
                }else{
                    toTop.fadeIn('fast');
                }
            });
            // 当点击按钮时触发
            toTop.click(function(){
                $('html ,body').animate({
                    scrollTop: 0
                },300); 
                return false;  
            });
        });
        </script>
    </body>
    </html>
  • 相关阅读:
    SqlServer该如何合适的索引
    SqlServer该如何合适的索引
    SQLServer跨库查询分布式查询
    SQLServer跨库查询分布式查询
    sqlserver 字符串能不能执行
    WPF添加类库并引用
    StringUtils类常用方法
    如何理解.NET开发中的x86/x64/AnyCPU
    JS获取url参数
    MySQL CONCAT函数:字符串拼接
  • 原文地址:https://www.cnblogs.com/bokebi520/p/4955502.html
Copyright © 2011-2022 走看看