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

先把下面的代码拷贝到个html中，运行看效果


代码如下:

<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>

速度可以自己控制哦。

赞 (0)

相关推荐

  • js 自制滚动条的小例子

    写了个js自制滚动条,首先,先看一下demo(点击这里) 先 有两个demo,右边那个黑色那个,是我一开始写的比较肤浅的代码: 复制代码 代码如下: var scrollself=(function(){ var scrollblock, //滚动块        scrollcontent,  //被滚动的内容        scrollbar,    //滚动条        scrollpanel,    //滚动内容的滚动区域        cdistance,  //滚动内容要滚动的距

  • 判断滚动条到底部的JS代码

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeight为内容可视区域的高度. scrollHeight为内容可视区域的高度加上溢出(滚动)的距离. 从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight. 废话不多少说,赶紧上代码(兼容不同的浏览器). 复制代码 代码如下: /

  • js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*

  • js判断滚动条是否已到页面最底部或顶部实例

    本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,下面就来给大家介绍这种效果实现原理与方法. 当可视区域小于页面的实际高度时,判定为出现滚动条,即: 复制代码 代码如下: if (document.documentElement.clientHeight < document.documentElement.offsetHeight) scroll

  • JS 获取滚动条高度示例代码

    复制代码 代码如下: function getScrollTop(){ var scrollTop=0; if(document.documentElement&&document.documentElement.scrollTop){ scrollTop=document.documentElement.scrollTop; }else if(document.body){ scrollTop=document.body.scrollTop; } return scrollTop; }

  • javascript jscroll模拟html元素滚动条

    javascript jscroll模拟html元素滚动条

    主流浏览器默认为html元素提供的滚动条不美观,而且前端开发人员想对其通过css进行统一样式的美化也是不可实现的.比如ie可以通过样式来实现简单的美化.Webkit内核浏览器可以控制滚动条的显示效果,firefox则不允许用户为滚动条定义样式.但是对于追求友好的用户体验的前端开发人员,是不会被这些浏览器的不一致行为所阻止的.我们可以自己通过标准的html元素模拟来实现自定义的滚动条. 这里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll,以下简称jscroll.jscro

  • js模拟滚动条(横向竖向)

    js模拟滚动条(横向竖向)

    JS: 复制代码 代码如下: (function(win){     var doc = win.document,db = doc.body;     var mousewheel = 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';     var skyScroll = function(opts){ return new skyScroll.prototype.init(opts);};     skyScroll

  • js动态移动滚动条至底部示例代码

    复制代码 代码如下: var currentPosition,timer; function GoBottom(){ timer=setInterval("runToBottom()",50); } function runToBottom(){ currentPosition=document.documentElement.scrollTop || document.body.scrollTop; currentPosition+=30; if(currentPosition<

  • 当滚动条滚动到页面底部自动加载增加内容的js代码

    1,注册页面滚动事件,window.onscroll = function(){ }; 2,相关获取页面高度.滚动条位置.文档高度的函数: 复制代码 代码如下: //获取滚动条当前的位置 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.s

  • js控制滚动条缓慢滚动到顶部实现代码

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

  • vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

    有时候我们需要页面滚动条滚动到某一固定的位置,一般使用Window scrollTo() 方法. 语法就是:scrollTo(xpos,ypos) xpos:必需.要在窗口文档显示区左上角显示的文档的 x 坐标. ypos:必需.要在窗口文档显示区左上角显示的文档的 y 坐标. 例如滚动内容的坐标位置100,500: window.scrollTo(100,500); 好了,这个scrollTop这儿只是简单介绍一下,下面我们介绍下veu-router中的滚动行为. 使用前端路由,当切换到新路由

  • js实现滚动条自动滚动

    本文实例为大家分享了js实现滚动条自动滚动的具体代码,供大家参考,具体内容如下 效果类似于直播网站的评论,会一条接着一条向上 go out : js部分很简单:通过控制scrollTop的值来实现自动滚动效果: 很重要两点:    1.scrollTop的值不可以加单位,谨记! 2.网页缩放比例会影响效果实现(下面具体说): scrollTop需要注意的三点: 1.如果这个元素没有被溢出,scrollTop为0: 2.设置的scrollTop值小于0,则scrollTop的值为0 3.如果设置s

  • js控制li的隐藏和显示实例代码

    js控制li的隐藏和显示实例代码

    html页面 <div class="favorite_list"> <div class="list_type" id="list_type"> <ul class="all"> <li> <a href="javascript:void(0);" onclick="showli(1);">全部(<span class=

  • jquery滚动到顶部底部代码

    HTML <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片预加载</title> <link rel="stylesheet" type="text/css" href="css/index.css"> <script ty

  • js控制的回到页面顶端goTop的代码实现

    js控制的回到页面顶端goTop的代码实现

    有没有见过很多在页面的右下角有个[回到顶端]的悬浮东东,并且在开始时没有,一移动滚动条就出现,回到了顶端又消失的样子. 像: 控制的js代码如下: 复制代码 代码如下: function goTop(){ var _btn = document.getElementById("goTop"); if (document.documentElement && document.documentElement.scrollTop) { var _con = document

  • JS控制图片等比例缩放的示例代码

    复制代码 代码如下: <SCRIPT language="JavaScript">function DrawImage(ImgD,FitWidth,FitHeight){       var image=new Image();       image.src=ImgD.src;       if(image.width>0 && image.height>0){           if(image.width/image.height>

  • js控制div及网页相关属性的代码

    动态创建DIV:var div = document.createElement("div"); 设置div属性及样式等: div.title="this is a new div."; div.class = "newDivClass"; div.innerHTML = "Test create a div element!"; div.style.styleFloat="left"; div.style

  • 原生JS控制多个滚动条同步跟随滚动效果

    原生JS控制多个滚动条同步跟随滚动效果

    在一些支持用 markdown 写文章的网站,后台写作页面,一般都是支持 markdown 即时预览的,也就是将整个页面分成两部分,左半部分是你输入的 markdown 文字,右半部分则即时输出对应的预览页面,例如下面就是 CSDN 后台写作页面的 markdown 即时预览效果: 本文不是阐述如何从 0 实现这种效果的(后续 很可能 会单出文章,),抛开其他,单看页面主体中左右两个容器元素,即 markdown 输入框元素和预览显示框元素 本文要探讨的是,当这两个容器元素的内容都超出了容器高度

  • js控制文本框输入的字符类型方法汇总

    JS 控制文本框只能输入数字 复制代码 代码如下: <input onkeyup="value=value.replace(/[^0-9]/g,'')" onpaste="value=value.replace(/[^0-9]/g,'')" oncontextmenu ="value=value.replace(/[^0-9]/g,'')"> JS 控制文本框只能输入数字.小数点 复制代码 代码如下: <input onkeyu

随机推荐