javascript 回到顶部效果的实现代码

 本篇文章主要是对javascript 回到顶部效果的实现代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助

 代码如下:
//speed 滚动速度 time 时间间隔
function gotoTop(speed,time){
 
    speed = speed || 0.1;
    time = time || 16;
 
    // 滚动条到页面顶部的水平距离
    var x = document.body.scrollLeft;
 
    // 滚动条到页面顶部的垂直距离
    var y = document.body.scrollTop;
 
    // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小
    speed++; 
    window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 
    // 如果距离不为零, 继续调用迭代本函数
    if(x > 0 || y > 0) {
 
        window.setTimeout("gotoTop(" + speed + ", " + time + ")", time);
    }
}
 
 
 
 

时间: 2024-12-04 00:09:18

javascript 回到顶部效果的实现代码的相关文章

javascript 回到顶部效果的实现代码_javascript技巧

复制代码 代码如下: //speed 滚动速度 time 时间间隔function gotoTop(speed,time){     speed = speed || 0.1;    time = time || 16;     // 滚动条到页面顶部的水平距离    var x = document.body.scrollLeft;     // 滚动条到页面顶部的垂直距离    var y = document.body.scrollTop;     // 滚动距离 = 目前距离 / 速度,

javascript返回顶部效果(自写代码)_javascript技巧

现在很多网站都用到了返回顶部的效果,当然懒的话也可以直接 a 链接链到 #,这样也可以达到效果.今天抽空用原生 javascript 写了个,由于本人水平有限,如有问题请指出. html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-回到顶部</title> &

javascript回到顶部特效_javascript技巧

本文实例为大家分享了javascript回到顶部效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <title>回到顶部效果

JQuery点击事件回到页面顶部效果的实现代码_jquery

JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <script type="text/javascript"> $(function(){ $("#top&quo

jquery实现跳到底部,回到顶部效果的简单实例(类似锚)_jquery

实例如下: <!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="Co

JS采用绝对定位实现回到顶部效果完整实例_javascript技巧

本文实例讲述了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&g

jquery网页回到顶部效果(图标渐隐,自写)_jquery

唔,进来开发需求,当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,而不是自己去滚滑轮~ 原本以为比较难的说,因为上头要求全部用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就尝试写了下,唔,没发现,还挺easy的说~~ 有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~ 复制代码 代码如下: <pre name="code" class="javascript">//回到顶部js $(function(){ v

javascript实现下雪效果【实例代码】_javascript技巧

原理 : 1.js动态创建DIV,指定CLASS类设置不同的背景图样式显示不同的雪花效果. 2.js获取创建的DIV并改变其top属性值,当下落的高度大于屏幕高后删除该移动div 3.好像不够完善勿喷 HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>雪花飞舞</title> <lin

JavaScript 消息框效果【实现代码】_javascript技巧

警告框 alert(); 确认框 var message=confirm("你喜欢javascript吗"); if(message==true){ document.write("很好,加油"); }else{ document.write("js功能强大,要学习哦"); } 提问框 prompt("文本","默认值"); var myname=prompt(请输入你的姓名); if(myname!=nu