滚动相应效果——返回顶部

来源：互联网发布：mac上eclipse汉化编辑：程序博客网时间：2024/06/11 13:07

1.html

<div class="setop"><a href="#" onclick="goTop();return false;" ><img src="themes/images/setop.jpg"/></a></div>

2.js

//返回顶部function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) {  x1 = document.documentElement.scrollLeft || 0;  y1 = document.documentElement.scrollTop || 0; } if (document.body) {  x2 = document.body.scrollLeft || 0;  y2 = document.body.scrollTop || 0; } var x3 = window.scrollX || 0; var y3 = window.scrollY || 0; // 滚动条到页面顶部的水平距离 var x = Math.max(x1, Math.max(x2, x3)); // 滚动条到页面顶部的垂直距离 var y = Math.max(y1, Math.max(y2, y3)); // 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 var speed = 1 + acceleration; window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); // 如果距离不为零, 继续调用迭代本函数 if(x > 0 || y > 0) {  var invokeFunction = "goTop(" + acceleration + ", " + time + ")";  window.setTimeout(invokeFunction, time); }}

或是

$('.zn-fixedringt-gotop').on('click',function(){$('body,html').animate({scrollTop:'0px'}, 800);//scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。})

阅读全文

0 0