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

js平滑滚动回到顶部

阅读更多
优先使用 requestAnimationFrame实现。
实验中发现,IE中的requestAnimationFrame 对象,在页面载入的时候,似乎是不可用的。 所以在 domContentLoaded事件以后再读取,才是安全的。
<script>
 //没有输出!
console.log(window.requestAnimationFrame || window.msRequestAnimationFrame );

window.onDomContentLoaded = function(){
        //这里就有了。
	console.log(window.requestAnimationFrame || window.msRequestAnimationFrame);	
}
</script>



function scrollUp(){
		
		//IE10+/Android Browser4.4+/
		var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame 
			|| window.webkitRequestAnimationFrame || window.msRequestAnimationFrame 
			|| function(clb){
				return setTimeout(clb,1000/60);
		    };

		var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame 
			|| window.webkitCancelAnimationFrame || window.msCancelAnimationFrame 
			|| function(id){clearTimeout(id);};

		//document.getElementById("imagePreview").scrollIntoView();
		//document.body.scrollTop = "0px";
		
		var top = document.body.scrollTop || document.documentElement.scrollTop;
		
		//滚动时长
		var duration = 300; //300ms
		
		//计算步长
		var step =  top / (duration / ( 1000 / 60)) >> 0; //取整
		
		//window.console && console.log(requestAnimationFrame);
		
		function fn(){

			if(top >= 0){
				top -= step;
				document.documentElement.scrollTop = document.body.scrollTop = top;
				fn.rafTimer = requestAnimationFrame(fn);
			}else{
				document.body.scrollTop = 0;
				cancelAnimationFrame(fn.rafTimer);
			}
		}
		fn.rafTimer = requestAnimationFrame(fn);
	}
分享到:
评论

相关推荐

    锚点平滑滚动

    下面我们将详细探讨锚点平滑滚动的工作原理、实现方式以及相关JavaScript知识。 一、锚点(Accessible Hash) 锚点是HTML中的一个概念,通过`&lt;a&gt;`标签配合`href`属性指向页面内的某个ID,形成内部链接。例如: ```...

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

    JavaScript负责监听用户的滚动行为,判断何时显示或隐藏返回顶部的图标(在这个案例中是“小火箭”),以及处理点击返回顶部时的平滑滚动事件。CSS3则用于设置图标样式,以及可能的动画效果,例如淡入淡出、滑动等。...

    固定div,滚动到顶部固定

    这种效果可以提升用户体验,因为用户无需滚动回顶部就能访问这些重要的导航链接或内容。 要实现这个功能,我们主要会用到CSS和JavaScript技术。在CSS中,我们可以使用`position`属性来控制元素的位置。当设置`...

    滚动条平滑滚动置顶&贴壁滚动层

    总之,“滚动条平滑滚动置顶&贴壁滚动层”是一种提升网页用户体验的技术,通过CSS和JavaScript的结合使用,实现平滑滚动、固定定位和粘性滚动效果,提供更加流畅、直观的浏览体验。在开发过程中,需要兼顾功能实现、...

    JavaScript实现的smooth scroll 平滑滚动菜单demo

    这段代码会选取所有带有`smooth-scroll`类的链接,当点击这些链接时,阻止其默认的跳转行为,而是计算出目标元素的顶部距离,然后执行平滑滚动。 在实际项目中,你可能还需要考虑其他因素,如浏览器兼容性、滚动...

    无限平滑滚动插件包 无限平滑滚动插件包

    Vue.js 是一款流行的前端JavaScript框架,Vue-seamless-scroll 就是专为Vue.js设计的实现无限平滑滚动效果的插件。 该插件的主要功能是将长列表分块加载,只在用户滚动到可视区域附近时加载相应的数据块,从而提高...

    iscroll分页滚动(加回到顶部)

    为了增加用户体验,还可以添加平滑滚动效果,通过设置`scrollTo`的第三个参数为true来实现。 **3. 底部悬浮显示当前页数与总页数** 这个功能可以帮助用户了解他们当前浏览的位置在整个内容中的位置。iscroll本身并...

    jquery平滑返回顶部效果(兼容IE6)

    然后,我们编写jQuery代码来实现平滑滚动效果。在页面加载完成后,当用户点击“返回顶部”按钮时,会触发一个动画效果,使页面平滑地滚动到顶部。以下是一个简单的实现示例: ```javascript $(document).ready...

    jquery平滑滚动到顶部插件使用详解

    本文详细介绍了如何在前端开发中使用jQuery平滑滚动到顶部插件。插件允许用户点击一个固定按钮实现页面平滑滚动至顶部的效果,这是一个在网页设计中非常实用的功能,可以让用户体验更加友好。 jQuery是一个快速、...

    回到顶部,纯javascript代码编写

    同时,为了在滚动过程中中断回顶部动画,我们可以监听鼠标的滚轮事件,并在滚轮滚动时停止定时器: ```javascript window.addEventListener('wheel', function(e) { if (document.getElementById('backToTop')....

    JavaScript回到顶部功能实现

    behavior: 'smooth' // 平滑滚动效果 }); }); ``` 至此,一个基本的JavaScript"回到顶部"功能已经实现。这个功能可以根据需求进行优化,例如添加动画效果、改变按钮的显示状态(如颜色变化)或者调整触发显示按钮...

    jQuery平滑滚动到页面指定位置

    在网页设计中,平滑滚动是一种提升用户体验的重要技术,它使得用户在点击链接或按钮时,页面能够平滑、流畅地滚动到目标位置,而不是瞬间跳转。在本教程中,我们将聚焦于如何使用jQuery来实现这个效果。jQuery库以其...

    回到顶部 js 实现

    // 平滑滚动到顶部 }); }); ``` 这里的`window.pageYOffset`获取当前滚动条的位置,当滚动超过200像素时,按钮显示。点击按钮时,`window.scrollTo`方法平滑地将页面滚动到顶部。 至于文件名`gototop`,这可能是...

    回到顶部JavaScript插件

    4. **动画效果**:为了让用户点击按钮后平滑地回到顶部,可以使用`requestAnimationFrame`或者CSS3的`transition`属性来实现平滑滚动。原生JavaScript中,可以利用定时器(`setInterval`或`setTimeout`)配合改变`...

    js滚动条回到顶部的代码

    JavaScript 和 jQuery 滚动条回到顶部的实现 在网页设计中,经常需要提供一个功能,让用户能够方便地将滚动条快速返回到页面顶部。这个功能通常通过点击一个按钮或者执行某个操作来触发。在提供的代码示例中,使用...

    回到顶部JS代码

    接下来是关键的JS部分,我们需要监听滚动事件,当页面滚动到一定距离时显示“回到顶部”按钮,点击按钮时则使页面滚动回顶部。以下是一个简单的实现: ```javascript document.addEventListener('DOMContentLoaded'...

    js动态返回顶部

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

    jQuery平滑返回顶部代码.zip

    点击按钮后,页面会在800毫秒内平滑滚动回顶部。 提到的“带二维码”可能意味着此代码实现还包括了将二维码集成到返回顶部功能中,这可能是为了方便移动用户快速扫描并访问页面。实现这种功能通常需要引入一个...

Global site tag (gtag.js) - Google Analytics