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

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

2014-04-08

  js 回到顶部效果的实现代码,只做简单介绍。CF7七七世界-网站建设|UI设计|人资系统|二次开发

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

 CF7七七世界-网站建设|UI设计|人资系统|二次开发

本文关键词:顶部  效果  代码  

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

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