zoukankan      html  css  js  c++  java
  • JS回到顶部按钮

    HTML:

    <input type="button" value="回到顶部" id="btn1" />

    CSS:

    *{
        margin: 0;
        padding: 0;
    }
    #btn1{
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 10px 20px;
    }

    JS:

    window.onload=function(){
        var oBnt = document.getElementById('btn1');
        var timer = null;
        var bSys = true;
    
        /* 检测是否为用户滚动或者为系统自身滚动 */
        window.onscroll=function(){
            if(!bSys){
                clearInterval(timer);
            }
            bSys=false;
        }
    
        oBnt.onclick=function(){
            timer = setInterval(function(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var iSpeed = Math.floor((-scrollTop/8));
    
                if(scrollTop == 0){
                    clearInterval(timer);
                }
                bSys = true;
                document.documentElement.scrollTop = document.body.scrollTop = scrollTop+iSpeed;
            },30)
        }
    }
    高否?富否?帅否? 否? 滚去学习!
  • 相关阅读:
    日志记录
    Ajax
    servlet3.0新特性
    文件上传和下载
    过滤器
    listener
    JavaWeb案例:登陆和注册
    jsp
    cookie和session
    HttpRequest,HttpResponse,乱码,转发和重定向
  • 原文地址:https://www.cnblogs.com/baixc/p/3462321.html
Copyright © 2011-2022 走看看