zoukankan      html  css  js  c++  java
  • JS-JQ-滚动条回到顶部

    一、思路:

      得到document.documentElement.scrollTop的值,赋值为0

      documentElement :属性可返回文档的根节点

    二、知识

      $(window) 获取的是窗口
      $('body,html')获取的是文件本身

      $('html,body') 为什么要写2个,是因为 firefox ie 不支持 body, chrome 支持的是body, 所以为了兼容就这样写

    !!! - CSS

    <style>
      body{height:3000px;}
      #div1{50px;height:50px;box-sizing: border-box;background:rosybrown;position:fixed;
      _position:absolute;_top:expression(documentElement.scrollTop+"px");
      z-index:9999;bottom:30px;right:30px;}
    </style>

    !!! - HTML

    <div id="div1"></div>

    !!! - JavaScript

       基础版本:小白就看这个吧,这个是基础版本

    window.onload=function()

    {
      var div1=document.getElementById('div1');
      div1.onclick=function()
      {

        //FF:document.documentElement.scrollTop获取滚动条滚动的高度

        //IE:document.body.scrollTop获取滚动条滚动的高度
        document.documentElement.scrollTop=document.body.scrollTop=0;
      }
    }

       中等版本:这个有了动画效果

    window.onload=function()
    {
      var div1=document.getElementById('div1');
      var byse=true;
      var timer=null;
      window.onscroll=function()
      {
        if(!byse)    //如果回到顶部的时候byse=false,
        {
          clearInterval(timer);
        }
        byse=false;
      }

      div1.onclick=function()
      {
        timer=setInterval(function(){
          var s=document.documentElement.scrollTop||document.body.scrollTop;
          var iSpeed=Math.floor(-s/8);
          var timer=null;
          if(s==0)
          {
            clearInterval(timer);
          }
          byse=true;
          document.documentElement.scrollTop=document.body.scrollTop=s+iSpeed;
        },30);
      }
    }

    !!!- JQuery

    $(function(){
      $('#div1').bind('click',function(){
        var s=0;
        $('body,html').animate({
          scrollTop:s,
        },30)
      })
    })

  • 相关阅读:
    oracle中查询或插入特殊字符
    html最多显示两行,css 实现两行或多行文本溢出显示省略号(...)
    RT
    发表一个自己做的WPF游戏
    用silverlight制作自己的GIS
    一个字符串切割问题
    Oracle所有者权限与调用者权限(转)
    Oracle角色权限的使用事项(转)
    Tomcat 内存溢出 详解
    forms验证:怎么验证两种身份?
  • 原文地址:https://www.cnblogs.com/xiaoyangtian/p/7922196.html
Copyright © 2011-2022 走看看