您当前的位置:首页 > 建站常识 > javascript

js滚动条回到顶部的代码

2014-04-08

  js滚动条回到顶部的代码,虽然平滑性不太好,但是适合学习一下。y8g七七世界-网站建设|UI设计|人资系统|二次开发

  代码如下:y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <!DOCTYPE HTML>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <html>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <head>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <script type="text/javascript"y8g七七世界-网站建设|UI设计|人资系统|二次开发
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <script type="text/javascript">y8g七七世界-网站建设|UI设计|人资系统|二次开发
     //怎么获取网页的高度 让页面一出来就滚动条在最底端y8g七七世界-网站建设|UI设计|人资系统|二次开发
     function myScroll()y8g七七世界-网站建设|UI设计|人资系统|二次开发
     {y8g七七世界-网站建设|UI设计|人资系统|二次开发
     //前边是获取chrome等一般浏览器 如果获取不到就是ie了 就用ie的办法获取y8g七七世界-网站建设|UI设计|人资系统|二次开发
     var x=document.body.scrollTop||document.documentElement.scrollTop;y8g七七世界-网站建设|UI设计|人资系统|二次开发
     var timer=setInterval(function(){y8g七七世界-网站建设|UI设计|人资系统|二次开发
     x=x-100;y8g七七世界-网站建设|UI设计|人资系统|二次开发
     if(x<100)y8g七七世界-网站建设|UI设计|人资系统|二次开发
     {y8g七七世界-网站建设|UI设计|人资系统|二次开发
     x=0;y8g七七世界-网站建设|UI设计|人资系统|二次开发
     window.scrollTo(x,x);y8g七七世界-网站建设|UI设计|人资系统|二次开发
     clearInterval(timer);y8g七七世界-网站建设|UI设计|人资系统|二次开发
     }y8g七七世界-网站建设|UI设计|人资系统|二次开发
     window.scrollTo(x,x);y8g七七世界-网站建设|UI设计|人资系统|二次开发
     },"250");y8g七七世界-网站建设|UI设计|人资系统|二次开发
     }y8g七七世界-网站建设|UI设计|人资系统|二次开发
     </script>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <title></title>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     </head>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <body id="bd">y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <div>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <div style="height:1000px;">初始化</div>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <div style="height:1000px">y8g七七世界-网站建设|UI设计|人资系统|二次开发
     <div style="position:fixed;right:10px;bottom:50px;y8g七七世界-网站建设|UI设计|人资系统|二次开发
     width:20px;height:70px;background-color:red;cursor:hand;"y8g七七世界-网站建设|UI设计|人资系统|二次开发
     onclick="myScroll()">返回顶端</div>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     </div>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     </body>y8g七七世界-网站建设|UI设计|人资系统|二次开发
     </html>y8g七七世界-网站建设|UI设计|人资系统|二次开发

  ps:注意代码中引入了jquery的包,如果您在复制代码的时候,效果不实现,请查看jquery包是否引入!y8g七七世界-网站建设|UI设计|人资系统|二次开发

本文关键词:平滑  顶部  代码  学习  

一切精彩源自七七网络!我们倾力打造时尚潮流第一线!

© 2012-2024七七世界网站建设     20707.net 1125w.com 版权所有     豫ICP备14018694号-1