js滚动条回到顶部的代码

2014-04-08

　　js滚动条回到顶部的代码,虽然平滑性不太好，但是适合学习一下。

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

　　ps:注意代码中引入了jquery的包，如果您在复制代码的时候，效果不实现，请查看jquery包是否引入！

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

上一篇：实现变速回到顶部的Js代码
下一篇：基于jquery的回到页面顶部按钮