`
janson.java
  • 浏览: 29940 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

js 返回顶部函数

 
阅读更多
function goTop(acceleration, time) {
acceleration = acceleration || 0.1;//加速度 acceleration
time = time || 15;//时间间隔
var x=0,y=0;

if (document.documentElement) {//获取当前位置
   x = document.documentElement.scrollLeft|| 0;
   y = document.documentElement.scrollTop || 0;
}

     var speed = 1 + acceleration;//滚动速度
      // floor()返回值为小于等于其数值参数的最大整数值 假如 y=36 speed=1.1   36/1.1=32;
      // scrollTo()滚动条将要移动到x y 经过计算得出的值
      window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 
      //如果 x (scrollLeft!=0)||y(scrollTop!=0)还未移动到顶部.所以setTimeout()继续执行该函数
      if(x > 0 || y > 0) {
           var invokeFunction = "goTop(" + acceleration + ", " + time + ")";
           window.setTimeout(invokeFunction, time);
      }
}
分享到:
评论

相关推荐

    js返回顶部效果 很炫

    要实现这个炫酷的JavaScript返回顶部效果,我们可以遵循以下步骤: 1. **创建HTML元素**:首先,我们需要在页面的底部或侧边添加一个返回顶部的按钮。这通常是一个`<a>`标签,设置相应的CSS样式以使其在视觉上吸引...

    js 网页返回顶部 置顶返回

    在网页设计中,"js 网页返回顶部 置顶返回" 是一个常见的功能需求,它允许用户轻松地将浏览器滚动到页面的顶部,提高用户体验。这一功能主要通过JavaScript实现,因为JavaScript是一种强大的客户端脚本语言,可以与...

    返回顶部JS代码

    10. **JS代码**:`js`文件通常会包含实现返回顶部功能的JavaScript代码,包括事件监听、DOM操作和动画逻辑。代码可能如下: ```javascript var backToTop = document.querySelector('.back-to-top'); window....

    带平滑效果的js返回顶部特效.zip

    这个“带平滑效果的js返回顶部特效”就是一种创新的实现方式,旨在为用户带来更加流畅和舒适的浏览体验。下面将详细介绍这个特效的实现原理、主要技术点以及如何在实际项目中应用。 首先,我们来解析这个特效的核心...

    js动态返回顶部

    在本案例中,"js动态返回顶部"指的是利用JavaScript实现一个功能,即当用户在浏览网页时,页面滚动到一定位置后,提供一个“返回顶部”的按钮,点击该按钮可以使页面瞬间滚动回顶部。 首先,我们需要在HTML文件中...

    JS鼠标点击下端返回顶部特效.zip

    总之,JS鼠标点击下端返回顶部特效是通过JavaScript实现的一个实用功能,它提高了长页面的用户体验,让用户可以轻松快捷地返回页面顶部。理解并掌握这种技术对于前端开发者来说是至关重要的,因为它能够提升网站的...

    Javascript返回顶部代码实现

    JavaScript 返回顶部功能是一种常见的网页交互设计,它允许用户在浏览页面时轻松地返回页面的顶部。这个功能在长页面或滚动内容丰富的网站中尤其有用,减少了用户手动滚动的麻烦。在本文中,我们将深入探讨如何使用...

    jquery右下角固定层返回顶部

    当用户滚动页面时,该函数会被触发,我们可以在这个事件回调中实现返回顶部按钮的显示与隐藏逻辑。 4. **CSS动画**:为了让返回顶部的效果更流畅,可以使用CSS3的`transition`或`animation`属性来创建平滑的过渡...

    返回顶部js

    本资源提供的"返回顶部js"是一个结合了JavaScript(js)和层叠样式表(css)的解决方案,旨在简化开发过程,让开发者能够轻松地将这一功能集成到自己的网站中。 首先,JavaScript(js)在这里起着关键作用,它是...

    Js返回顶部

    这样,我们就实现了JavaScript的返回顶部功能。当用户滚动页面超过500像素,返回顶部按钮就会出现,点击按钮则会平滑地将页面滚动回顶部。这种方法既考虑了用户体验,又通过JavaScript的事件监听和处理实现了动态...

    百度返回顶部JS源代码+返回顶部图片

    "newscrollandtabs.js" 是一个JavaScript文件,包含了实现返回顶部功能的代码。在JavaScript中,实现这个功能通常涉及到监听滚动事件,当用户滚动到一定距离后显示返回顶部按钮,然后为该按钮绑定点击事件,点击时...

    Final project_js轮播图_js返回顶部_

    在本项目"Final project_js轮播图_js返回顶部_"中,开发者主要实现了两个核心功能:JavaScript(js)轮播图和js返回顶部功能。这两个功能是网页动态效果和用户体验优化的重要组成部分。 首先,我们来详细了解一下...

    弹性返回顶部JS代码

    在网页设计中,"弹性返回顶部JS代码"是一种常见的用户交互功能,特别是在长页面或滚动内容较多的网站中。这个功能允许用户通过点击一个图标或按钮轻松地将页面滚动回顶部,提供更好的浏览体验。本篇文章将深入探讨这...

    JS火箭返回顶部

    总的来说,"JS火箭返回顶部"是利用JavaScript和HTML实现的一种网页交互设计,它不仅提供了实用的导航功能,还通过动画效果增强了用户体验。对于前端开发者来说,理解和实现这样的功能有助于提升网页的互动性和吸引力...

    js简洁客服和返回顶部右侧漂浮代码,有动画效果,兼容主流浏览器

    在前端开发中,创建用户友好的交互体验是至关重要的,而"js简洁客服和返回顶部右侧漂浮代码,有动画效果,兼容主流浏览器"正是针对这一需求的解决方案。这个项目结合了JavaScript(js)、ECMAScript(ECMAScript是...

    仿太平洋返回顶部

    "仿太平洋返回顶部"是借鉴了太平洋汽车网实现这一功能的方式,主要涉及到的技术包括JavaScript、jQuery。下面将详细解释这些技术以及如何实现返回顶部效果。 **JavaScript基础** JavaScript 是一种广泛使用的客户端...

    百度站长平台返回顶部JS代码

    百度站长平台提供的返回顶部JS代码是一种实现这一功能的JavaScript代码片段。下面将详细解释这个功能的实现原理、应用场景以及如何使用和自定义。 1. 返回顶部功能实现原理: - JavaScript是实现这一功能的核心...

Global site tag (gtag.js) - Google Analytics