js控制滚动条缓慢滚动到顶部

<html>
<head>
<script type="text/javascript">
var currentPosition,timer;
function GoTop(){
	timer=setInterval("runToTop()",1);
}
function runToTop(){
	currentPosition=document.documentElement.scrollTop || document.body.scrollTop;
	currentPosition-=10;
	if(currentPosition>0)
	{
		window.scrollTo(0,currentPosition);
	}
	else
	{
		window.scrollTo(0,0);
		clearInterval(timer);
	}
}
</script>
<style type="text/css">

</style>
</head>
<body>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">饭</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">吃</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">家</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">回</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">你</div>
<div style="height:1000px;text-align:center;font-size:200px;font-weight:bold;">带</div>
<div id="back-up" onclick="GoTop()"
style="border:1px solid red;height:100px;width:15px;
position:fixed;cursor:pointer;right:10px;bottom:30px;">
返回顶部
</div>
<script>
window.scrollTo(0,document.body.scrollHeight);
</script>
</body>
</html>

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索滚动
, window
, timer
, document
, scrollto
, scrollTop
, jquery滚动到顶部
滚动到顶部底部
js控制滚动条到最顶部、滚动条缓慢滚动、滚动条距离顶部的距离、js滚动条到顶部、滚动条回到顶部,以便于您获取更多的相关知识。

时间: 2024-11-02 21:02:24

js控制滚动条缓慢滚动到顶部的相关文章

js控制滚动条缓慢滚动到顶部实现代码_javascript技巧

先把下面的代码拷贝到个html中,运行看效果 复制代码 代码如下: <html> <head> <script type="text/javascript"> var currentPosition,timer; function GoTop(){ timer=setInterval("runToTop()",1); } function runToTop(){ currentPosition=document.documentE

js控制每个li滑到顶部时翻转90度离开,下滑时翻转90度进来中js代码怎么写啊

问题描述 js控制每个li滑到顶部时翻转90度离开,下滑时翻转90度进来中js代码怎么写啊 比如下面截图,当li滑到红色的区域时就翻转90度消失

js控制图片左右滚动

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

js控制滚动条示例

<html> <head> <script type="text/javascript"> var currentPosition,timer,timer1; function GoTop(){ timer=setInterval("runToTop()",1); } function GoButtom(){ //alert(document.body.scrollHeight); timer1=setInterval("

js实现滚动条滚动到页面底部继续加载_javascript技巧

这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的.但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得. 原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件时判断是否滚动到了浏览器底部,如果到了底部则加载新数据.关键是计算滚动条是否滚动到了浏览器底部,算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/:如果这个判断为true则表示滚动条滚动到了底部. 实例 <

javascript控制滚动条与获取控件的位置

ie 6 需要用document.documentElement.scrollTop 获取滚动条位置 ie 其他版本可以用 document.body.scrollTop 获取滚动条位置 其他浏览器可以用 window.pageYOffset 获取滚动条位置 当聊天室的内容超出页面范围时, 如何让页面刷新后 显示最下面的内容  代码如下 复制代码  document.getElementById ( 'chatboard').scrollTop=document.getElementById (

js网页滚动条滚动事件实例分析_javascript技巧

本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 <style type="text/css"> #top_div{ position:fixed; bottom:80px; rig

js网页滚动条滚动事件实例分析

  本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件发生时,用js获得页面的scrollTop值,判断scrollTop为一个设定值时,显示"返回面部" js网页滚动条滚动事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <style

JS实现部分HTML固定页面顶部随屏滚动效果_javascript技巧

本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如