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>
  • 相关阅读:
    part11-1 Python图形界面编程(Python GUI库介绍、Tkinter 组件介绍、布局管理器、事件处理)
    part10-3 Python常见模块(正则表达式)
    Cyclic Nacklace HDU
    模拟题 Right turn SCU
    状态DP Doing Homework HDU
    Dp Milking Time POJ
    区间DP Treats for the Cows POJ
    DP Help Jimmy POJ
    Dales and Hills Gym
    Kids and Prizes Gym
  • 原文地址:https://www.cnblogs.com/bokebi520/p/4955502.html
Copyright © 2011-2022 走看看