我正在寻找一种简单的、跨浏览器的“回到顶部”的动画效果，可以应用于一个链接。我不想使用像jQuery/Moo等JS库。
// jQuery Equivilant to convert to pure JS...
$('html, body').animate({scrollTop:0}, 400);
我是一个典型的例子，应该在涉及库之前先完全学习JS. :(
跨浏览器的JavaScript（非jQuery...）回到顶部动画
238
- Heather Hins
9
22个回答
141
function scrollTo(element, to, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop === to) return;
scrollTo(element, to, duration - 10);
}, 10);
}
演示:
function runScroll() {
scrollTo(document.body, 0, 600);
}
var scrollme;
scrollme = document.querySelector("#scrollme");
scrollme.addEventListener("click",runScroll,false)
function scrollTo(element, to, duration) {
if (duration <= 0) return;
var difference = to - element.scrollTop;
var perTick = difference / duration * 10;
setTimeout(function() {
element.scrollTop = element.scrollTop + perTick;
if (element.scrollTop == to) return;
scrollTo(element, to, duration - 10);
}, 10);
}<p>Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page. Very long page.
</p>
<button id=scrollme type="button">To the top</button>- TimWolla
14
11除非您设置 CSS:
body{height:100%;}，否则请使用document.documentElement而不是document.body。使用此概念的工作演示：http://jsfiddle.net/S5ALP/1/。 - Rob W8你的意思是：@RobW你添加的内容在Google Chrome @ Ubuntu Linux中无效。 - TimWolla
3它在 Firefox 9.0 和 Ubuntu 上也是如此。你的代码在 Firefox 中失败了，但在 Chrome 中成功，我的代码在 Chrome 中失败了，但在 Firefox 中成功。 - Rob W
4将其修改为使用
top.window.scroll(0, value)而不是element.scrollTop = value，可以使其在Chrome和Firefox（Ubuntu）中都能正常工作。 :) - Shomz3请注意，这段代码在Chrome 69.0.3497.100上无法运行，该版本是截至今天的最新版本。 - Isaac Vidrine
显示剩余9条评论
115
看起来已经有很多解决方案了。无论如何，这里有另一个解决方案，使用缓动方程..
// first add raf shim
// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
// main function
function scrollToY(scrollTargetY, speed, easing) {
// scrollTargetY: the target scrollY property of the window
// speed: time in pixels per second
// easing: easing equation to use
var scrollY = window.scrollY || document.documentElement.scrollTop,
scrollTargetY = scrollTargetY || 0,
speed = speed || 2000,
easing = easing || 'easeOutSine',
currentTime = 0;
// min time .1, max time .8 seconds
var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));
// easing equations from https://github.com/danro/easing-js/blob/master/easing.js
var easingEquations = {
easeOutSine: function (pos) {
return Math.sin(pos * (Math.PI / 2));
},
easeInOutSine: function (pos) {
return (-0.5 * (Math.cos(Math.PI * pos) - 1));
},
easeInOutQuint: function (pos) {
if ((pos /= 0.5) < 1) {
return 0.5 * Math.pow(pos, 5);
}
return 0.5 * (Math.pow((pos - 2), 5) + 2);
}
};
// add animation loop
function tick() {
currentTime += 1 / 60;
var p = currentTime / time;
var t = easingEquations[easing](p);
if (p < 1) {
requestAnimFrame(tick);
window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
} else {
console.log('scroll done');
window.scrollTo(0, scrollTargetY);
}
}
// call it once to get started
tick();
}
// scroll it!
scrollToY(0, 1500, 'easeInOutQuint');
- shunryu111
5
10很高兴有人在使用
requestAnimationFrame。 - Lucas4应该投票并选择为答案。这是唯一适用于所有浏览器的方案。 - wlingke
requestAnimationFrame 不兼容所有浏览器，特别是一些移动设备，因此它不是一个动态的解决方案，请参见：https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame。 - RAMM-HDR1在代码片段的顶部有一个针对
requestAnimationFrame的shim，它应该可以解决任何浏览器不兼容问题。 - shunryu111当Firefox浏览器上的页面有很多图片时，动画会变得非常卡顿。https://stackoverflow.com/questions/56396100/firefox-scroll-is-very-laggy-compared-to-chrome-and-safari?noredirect=1#comment99396850_56396100 - user3476614
90
- Mihai Răducanu
9
6起初差点踩了一个 jQuery 的坑，这篇文章分类也很混乱！此外，我想指出
scrollIntoView({behavior: 'smooth'}) 这个方法也存在，对于这种问题可能更加适用。 - Brendan1这在最新版本的Chrome中会抛出一个错误：“Uncaught TypeError: Failed to execute 'scroll' on 'Window': No function was found that matched the signature provided.” - rorymorris89
1@Sgnl 可以确认此问题已解决。好老的 Chrome 更新总是会把事情搞砸 :) - rorymorris89
4我不知道为什么这个没有更多的投票，只需要一点点代码就能实现回到顶部功能，而不是写上100000行的代码。谢谢！ - Smokey Dawson
4这个答案必须标记为被采纳的答案。不使用任何自定义过渡函数的内置方法，为什么不呢！？谢谢！ - Sagar
显示剩余4条评论
72
我修改了TimWolla的答案，使用二次缓入缓出的缓动函数（稍微更平滑一些:）。这里是一个示例：在 jsFiddle 上。缓动函数在这里提供：Robert Penner's Easing functions
document.getElementsByTagName('button')[0].onclick = function () {
scrollTo(document.body, 0, 1250);
}
function scrollTo(element, to, duration) {
var start = element.scrollTop,
change = to - start,
increment = 20;
var animateScroll = function(elapsedTime) {
elapsedTime += increment;
var position = easeInOut(elapsedTime, start, change, duration);
element.scrollTop = position;
if (elapsedTime < duration) {
setTimeout(function() {
animateScroll(elapsedTime);
}, increment);
}
};
animateScroll(0);
}
function easeInOut(currentTime, start, change, duration) {
currentTime /= duration / 2;
if (currentTime < 1) {
return change / 2 * currentTime * currentTime + start;
}
currentTime -= 1;
return -change / 2 * (currentTime * (currentTime - 2) - 1) + start;
}
- akai
7
5你的代码在火狐浏览器中不起作用。有解决方法吗？ - Milos
2@Milos 只需使用 "scrollTo(document.documentElement, 0, 1250);" 而不是 "scrollTo(document.body, 0, 1250);"，它应该在 Firefox 和 Chrome 中都可以工作。 - mrksbnch
2@Daniel
document.documentElement 在 Chrome 中不起作用。 - swade真的很喜欢缓动效果！ - Mick
显示剩余2条评论
29
没有 JQuery 代码，希望这可以帮到你。
function TopscrollTo() {
if(window.scrollY!=0)
{
setTimeout(function() {
window.scrollTo(0,window.scrollY-30);
TopscrollTo();
}, 100);
}
}
在按钮点击事件或其他您需要的元素/事件上调用此TopscrollTo()函数。
- Vishal Patel
22
我修改了@TimWolla的代码，添加了更多选项和一些移动功能。还添加了对跨浏览器的支持，使用document.body.scrollTop和document.documentElement.scrollTop
// scroll to top
scrollTo(0, 1000);
// Element to move, time in ms to animate
function scrollTo(element, duration) {
var e = document.documentElement;
if(e.scrollTop===0){
var t = e.scrollTop;
++e.scrollTop;
e = t+1===e.scrollTop--?e:document.body;
}
scrollToC(e, e.scrollTop, element, duration);
}
// Element to move, element or px from, element or px to, time in ms to animate
function scrollToC(element, from, to, duration) {
if (duration <= 0) return;
if(typeof from === "object")from=from.offsetTop;
if(typeof to === "object")to=to.offsetTop;
scrollToX(element, from, to, 0, 1/duration, 20, easeOutCuaic);
}
function scrollToX(element, xFrom, xTo, t01, speed, step, motion) {
if (t01 < 0 || t01 > 1 || speed<= 0) {
element.scrollTop = xTo;
return;
}
element.scrollTop = xFrom - (xFrom - xTo) * motion(t01);
t01 += speed * step;
setTimeout(function() {
scrollToX(element, xFrom, xTo, t01, speed, step, motion);
}, step);
}
function easeOutCuaic(t){
t--;
return t*t*t+1;
}
点击此处查看与IT技术有关的内容。
缩小版： 点击此处
// c = element to scroll to or top position in pixels
// e = duration of the scroll in ms, time scrolling
// d = (optative) ease function. Default easeOutCuaic
function scrollTo(c,e,d){d||(d=easeOutCuaic);var a=document.documentElement;if(0===a.scrollTop){var b=a.scrollTop;++a.scrollTop;a=b+1===a.scrollTop--?a:document.body}b=a.scrollTop;0>=e||("object"===typeof b&&(b=b.offsetTop),"object"===typeof c&&(c=c.offsetTop),function(a,b,c,f,d,e,h){function g(){0>f||1<f||0>=d?a.scrollTop=c:(a.scrollTop=b-(b-c)*h(f),f+=d*e,setTimeout(g,e))}g()}(a,b,c,0,1/e,20,d))};
function easeOutCuaic(t){
t--;
return t*t*t+1;
}
- Forestrf
2
当您第一次调用scrollToX时，执行
1/duration有什么意义呢？ - Jessicat01是从0增加到1的时间。如果它达到1，滚动结束。这是我2年前做的，我不记得所有细节，很抱歉。 - Forestrf
17
没有人提到CSS属性 scroll-behavior
CSS
html {
scroll-behavior: smooth;
}
JS
->JavaScript
window.scrollTo(0,0)
- Fangxing
3
这个功能非常棒！虽然不是所有浏览器都支持，但它会很好地回退。 - Swimburger
耶稣啊，这个东西一直在哪里啊？ - Mitya
向上，向上，向上，向上！ :) - John T
11
改编自这个答案:
function scroll(y, duration) {
var initialY = document.documentElement.scrollTop || document.body.scrollTop;
var baseY = (initialY + y) * 0.5;
var difference = initialY - baseY;
var startTime = performance.now();
function step() {
var normalizedTime = (performance.now() - startTime) / duration;
if (normalizedTime > 1) normalizedTime = 1;
window.scrollTo(0, baseY + difference * Math.cos(normalizedTime * Math.PI));
if (normalizedTime < 1) window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);
}
这应该让你能够在任何位置平滑地滚动（余弦函数）到指定的“y”。
- Raslanove
11
实际上，有一种纯JavaScript的方法可以完成此操作，无需使用 setTimeout 或 requestAnimationFrame 或 jQuery。
简而言之，找到你要滚动到的scrollView中的元素，然后使用scrollIntoView。
el.scrollIntoView({behavior:"smooth"});
这里有一个plunkr示例。
- Jon
2
最佳答案：一行代码，最短且有效 ;) - Jacopo Pace
1请注意，传递
scrollIntoViewOption 不具有跨浏览器支持。https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView - WebWanderer9
JAVASCRIPT纯滚动条类
这是一个老问题，但我认为我可以用一些花哨的东西来回答，并提供更多选项供您使用，如果您想对动画进行更多控制。
这里是一个纯JS类来为您处理滚动：
请参见演示CODEPEN或向下滚动到底部并运行SINPET
// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
'showButtonAfter': 200, // show button after scroling down this amount of px
'animate': "linear", // [false|normal|linear] - for false no aditional settings are needed
'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
'steps': 20, // the more steps per loop the slower animation gets
'ms': 10 // the less ms the quicker your animation gets
},
'linear': { // applys only if [animate: linear] - set scroll px|ms
'px': 30, // the more px the quicker your animation gets
'ms': 10 // the less ms the quicker your animation gets
},
};
// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();
完整的类脚本和使用示例：
// PURE JAVASCRIPT (OOP)
function Scroller(options) {
this.options = options;
this.button = null;
this.stop = false;
}
Scroller.prototype.constructor = Scroller;
Scroller.prototype.createButton = function() {
this.button = document.createElement('button');
this.button.classList.add('scroll-button');
this.button.classList.add('scroll-button--hidden');
this.button.textContent = "^";
document.body.appendChild(this.button);
}
Scroller.prototype.init = function() {
this.createButton();
this.checkPosition();
this.click();
this.stopListener();
}
Scroller.prototype.scroll = function() {
if (this.options.animate == false || this.options.animate == "false") {
this.scrollNoAnimate();
return;
}
if (this.options.animate == "normal") {
this.scrollAnimate();
return;
}
if (this.options.animate == "linear") {
this.scrollAnimateLinear();
return;
}
}
Scroller.prototype.scrollNoAnimate = function() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
Scroller.prototype.scrollAnimate = function() {
if (this.scrollTop() > 0 && this.stop == false) {
setTimeout(function() {
this.scrollAnimate();
window.scrollBy(0, (-Math.abs(this.scrollTop()) / this.options.normal['steps']));
}.bind(this), (this.options.normal['ms']));
}
}
Scroller.prototype.scrollAnimateLinear = function() {
if (this.scrollTop() > 0 && this.stop == false) {
setTimeout(function() {
this.scrollAnimateLinear();
window.scrollBy(0, -Math.abs(this.options.linear['px']));
}.bind(this), this.options.linear['ms']);
}
}
Scroller.prototype.click = function() {
this.button.addEventListener("click", function(e) {
e.stopPropagation();
this.scroll();
}.bind(this), false);
this.button.addEventListener("dblclick", function(e) {
e.stopPropagation();
this.scrollNoAnimate();
}.bind(this), false);
}
Scroller.prototype.hide = function() {
this.button.classList.add("scroll-button--hidden");
}
Scroller.prototype.show = function() {
this.button.classList.remove("scroll-button--hidden");
}
Scroller.prototype.checkPosition = function() {
window.addEventListener("scroll", function(e) {
if (this.scrollTop() > this.options.showButtonAfter) {
this.show();
} else {
this.hide();
}
}.bind(this), false);
}
Scroller.prototype.stopListener = function() {
// stop animation on slider drag
var position = this.scrollTop();
window.addEventListener("scroll", function(e) {
if (this.scrollTop() > position) {
this.stopTimeout(200);
} else {
//...
}
position = this.scrollTop();
}.bind(this, position), false);
// stop animation on wheel scroll down
window.addEventListener("wheel", function(e) {
if (e.deltaY > 0) this.stopTimeout(200);
}.bind(this), false);
}
Scroller.prototype.stopTimeout = function(ms) {
this.stop = true;
// console.log(this.stop); //
setTimeout(function() {
this.stop = false;
console.log(this.stop); //
}.bind(this), ms);
}
Scroller.prototype.scrollTop = function() {
var curentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return curentScrollTop;
}
// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
'showButtonAfter': 200, // show button after scroling down this amount of px
'animate': "normal", // [false|normal|linear] - for false no aditional settings are needed
'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
'steps': 20, // the more steps per loop the slower animation gets
'ms': 10 // the less ms the quicker your animation gets
},
'linear': { // applys only if [animate: linear] - set scroll px|ms
'px': 30, // the more px the quicker your animation gets
'ms': 10 // the less ms the quicker your animation gets
},
};
// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();/* CSS */
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
font-size: 1.2rem;
line-height: 2rem;
height: 100%;
position: relative;
padding: 0 25%;
}
.scroll-button {
font-size: 1.2rem;
line-height: 2rem;
padding: 10px;
width: 50px;
height: 50px;
background: black;
color: white;
border-radius: 50%;
position: fixed;
right: 20px;
bottom: 20px;
visibility: visible;
filter: alpha(opacity=50);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50);
opacity: 0.5;
cursor: pointer;
transition: all 1.2s;
-webkit-transition: all 1.2s;
-moz-transition: all 1.2s;
-ms-transition: all 1.2s;
-o-transition: all 1.2s;
}
.scroll-button:hover {
filter: alpha(opacity=100);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
}
.scroll-button--hidden {
filter: alpha(opacity=0);
filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
visibility: hidden;
}<!-- HTML -->
<h1>Scroll down by 200px for button to appear</h1>
<ul>
<li>Cross-browser</li>
<li>Copy/Paste solution</li>
<li>3 animate modes: <b>["normal"|"linear"|false]</b></li>
<li>Customize your aniamtion with aveilable settings - make it snapy or fluent</li>
<li>Double click to skip animation</li>
<li>Every next single click adds initial speed</li>
<li>Stop scroll animation by draging down the scroll bar</li>
<li>Stop scroll animation by mouse wheel down</li>
<li>Animated button fade-in-out on scroll</li>
</ul>
<br />
<br />
<pre>
// ------------------- USE EXAMPLE ---------------------
// *Set options
var options = {
'showButtonAfter': 200, // show button after scroling down this amount of px
'animate': "normal", // [false|normal|linear] - for false no aditional settings are needed
'normal': { // applys only if [animate: normal] - set scroll loop distanceLeft/steps|ms
'steps': 20, // the more steps the slower animation gets
'ms': 20 // the less ms the quicker your animation gets
},
'linear': { // applys only if [animate: linear] - set scroll px|ms
'px': 55, // the more px the quicker your animation gets
'ms': 10 // the less ms the quicker your animation gets
},
};
// *Create new Scroller and run it.
var scroll = new Scroller(options);
scroll.init();
</pre>
<br />
<br />
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae molestiae illo nobis quo autem molestias voluptatum quam, amet ipsum debitis, iure animi illum soluta eaque qui perspiciatis harum, sequi nesciunt.</span><span>Quisquam nesciunt aspernatur a possimus pariatur enim architecto. Hic aperiam sit repellat doloremque vel est soluta et assumenda dolore, sint sapiente porro, quam impedit. Sint praesentium quas excepturi, voluptatem dicta!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, porro nisi molestias minima corrupti tempore, dolorum fugiat ipsam dicta doloremque accusamus atque consequatur iusto natus, mollitia distinctio odit dolor tempora.</span><span>Perferendis a in laudantium accusantium, dolorum eius placeat velit porro similique, eum cumque veniam neque aspernatur architecto suscipit rem laboriosam voluptates laborum? Voluptates tempora necessitatibus animi nostrum quod, maxime odio.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil accusantium, itaque corporis repellat pariatur soluta officia perspiciatis in reprehenderit facere, incidunt saepe excepturi. Inventore atque ex illo, ipsam at deserunt.</span><span>Laborum inventore officia, perspiciatis cumque magni consequatur iste accusantium soluta, nesciunt blanditiis voluptatibus adipisci laudantium mollitia minus quia necessitatibus voluptates. Minima unde quos impedit necessitatibus aspernatur minus maiores ipsa eligendi!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate nesciunt, explicabo similique, quo maxime modi, aliquid, voluptatibus repellendus dolorum placeat mollitia ea dicta quia laboriosam alias dignissimos ipsam tenetur. Nulla.</span><span>Vel maiores necessitatibus odio voluptate debitis, error in accusamus nulla, eum, nemo et ea commodi. Autem numquam at, consequatur temporibus. Mollitia placeat nobis blanditiis impedit distinctio! Ad, incidunt fugiat sed.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatum, odio quam omnis iste laudantium, itaque architecto, eos ullam debitis delectus sapiente nemo autem reprehenderit. Dolorem quidem facere ipsam! Nisi.</span><span>Vitae quaerat modi voluptatibus ratione numquam? Sapiente aliquid officia pariatur quibusdam aliquam id expedita non recusandae, cumque deserunt asperiores. Corrupti et doloribus aspernatur ipsum asperiores, ipsa unde corporis commodi reiciendis?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima adipisci minus iste, nesciunt itaque quisquam quidem voluptatum assumenda rerum aliquid, excepturi voluptatem tempora. Possimus ratione alias a error vel, rem.</span><span>Officia esse error accusantium veritatis ad, et sit animi? Recusandae mollitia odit tenetur ad cumque maiores eligendi blanditiis nobis hic tempora obcaecati consequatur commodi totam, debitis, veniam, ducimus molestias ut.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quibusdam, tempora cupiditate quaerat tempore ullam delectus voluptates optio eum placeat provident consequatur iure reprehenderit vero quae sapiente architecto earum nemo.</span><span>Quis molestias sint fuga doloribus, necessitatibus nulla. Esse ipsa, itaque asperiores. Tempora a sequi nobis cumque incidunt aspernatur, pariatur rem voluptatibus. Atque veniam magnam, ea laudantium ipsum reprehenderit sapiente repellendus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, pariatur at explicabo aliquid repudiandae vero eum quasi totam voluptates iusto unde ad repellendus ipsam et voluptatem hic adipisci! Vero, nobis!</span><span>Consequatur eligendi quo quas omnis architecto dolorum aperiam doloremque labore, explicabo enim incidunt vitae saepe, quod soluta illo odit provident amet beatae quasi animi. Similique nostrum molestiae animi corrupti qui?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias quis, tempora laborum incidunt qui fuga adipisci doloremque iusto commodi vitae est, nemo iure placeat ut sit optio, consequuntur voluptas impedit.</span><span>Eos officiis, hic esse unde eaque, aut tenetur voluptate quam sint vel exercitationem totam dolor odio soluta illo praesentium non corrupti! Consequuntur velit, mollitia excepturi. Minus, veniam accusantium! Aliquam, ea!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quis reiciendis veritatis expedita velit vitae amet magni sunt rerum in blanditiis aut tempore quia fugiat, voluptates officia quaerat quam id.</span><span>Sapiente tempore repudiandae, quae doloremque ullam odio quia ea! Impedit atque, ipsa consequatur quis obcaecati voluptas necessitatibus, cupiditate sunt amet ab modi illum inventore, a dolor enim similique architecto est!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque non aliquam, sit illo quas deserunt esse nobis reprehenderit quidem fuga beatae eligendi reiciendis omnis qui repellat velit earum blanditiis possimus.</span><span>Provident aspernatur ducimus, illum beatae debitis vitae non dolorum rem officia nostrum natus accusantium perspiciatis ad soluta maiores praesentium eveniet qui hic quis at quaerat ea perferendis. Ut, aut, natus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione corrupti quibusdam, sed hic veniam. Perspiciatis ex, quod architecto natus autem totam at commodi excepturi maxime pariatur corporis, veritatis vero, praesentium.</span><span>Nesciunt suscipit, nobis eos perferendis ex quaerat inventore nihil qui magnam saepe rerum velit reiciendis ipsam deleniti ducimus eligendi odio eius minima vero, nisi voluptates amet eaque, iste, labore laudantium.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, voluptas accusantium ad omnis velit distinctio! Adipisci magnam nihil nostrum molestiae rem dolores, ut ad nemo, dolor quos itaque maiores quaerat!</span><span>Quia ad suscipit reprehenderit vitae inventore eius non culpa maiores omnis sit obcaecati vel placeat quibusdam, ipsa exercitationem nam odit, magni nobis. Quam quas, accusamus expedita molestiae asperiores eaque ex?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum explicabo doloribus nihil iusto quasi vel expedita dignissimos amet mollitia, temporibus aut atque architecto assumenda dolorum nam velit deserunt totam numquam.</span><span>Ab perferendis labore, quae. Quidem architecto quo officia deserunt ea doloribus libero molestias id nisi perferendis eum porro, quibusdam! Odit aliquid placeat rem aut officia minus sit esse eos obcaecati!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi nostrum repellendus placeat, unde aperiam. Fuga, voluptas, minima. Debitis nemo ducimus itaque laboriosam error quaerat reprehenderit quo animi incidunt. Nulla, quis!</span><span>Explicabo assumenda dicta ratione? Tempora commodi asperiores, explicabo doloremque eius quia impedit possimus architecto sit nemo odio eum fuga minima dolor iste mollitia sequi dolorem perspiciatis unde quisquam laborum soluta.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam officia corporis, reiciendis laudantium, voluptate voluptates necessitatibus assumenda, delectus quisquam velit deserunt! Reprehenderit, vel quaerat accusantium nesciunt libero animi. Sequi, eveniet?</span><span>Animi natus pariatur porro, alias, veniam aut est tempora adipisci molestias harum modi cumque assumenda enim! Expedita eveniet autem illum rerum nostrum ipsum alias neque aut, dolorum impedit pariatur non?</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis aliquid rerum, odio veniam ipsam ad officia quos repellat ex aperiam voluptatum optio est animi possimus minus. Sapiente voluptates amet dolorem.</span><span>Illo necessitatibus similique asperiores inventore ut cumque nihil assumenda debitis explicabo rerum, dolorum molestiae culpa accusantium. Nisi doloremque optio provident blanditiis, eum ipsam asperiores, consequatur aliquam vel sit mollitia sunt.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, totam harum perferendis. Minus ea perferendis laboriosam, iste, qui corrupti, quas veritatis omnis officiis animi fuga perspiciatis impedit! Error, harum, voluptas.</span><span>Omnis laborum, cum mollitia facilis ipsa unde distinctio maxime nesciunt illum perspiciatis ut officiis, eligendi numquam dolorem quod modi ipsam est rerum perferendis repellendus totam. Maxime excepturi culpa alias labore.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit deleniti, odit sit consequatur dolorum omnis repellendus, alias vel ullam numquam. Nostrum obcaecati hic, possimus delectus nam atque aliquid explicabo cum.</span><span>Explicabo tenetur minima consequatur, aliquam, laudantium non consequuntur facilis sint, suscipit debitis ex atque mollitia magni quod repellat ratione dolorum excepturi molestiae cumque iusto eos unde? Voluptatum dolores, porro provident!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At laboriosam fuga aperiam eveniet, obcaecati esse, nulla porro iure molestiae praesentium sint fugiat ea voluptate suscipit voluptates mollitia, voluptatibus. Autem, non.</span><span>Numquam velit culpa tempora ratione ipsum minus modi in? Nisi reiciendis, voluptate voluptatem maxime repellat quae odio, repellendus aliquid laborum dolorem. Labore, fuga ea minima explicabo quae voluptatum necessitatibus, similique.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, rerum dolorum nemo error fugiat ut, modi, architecto libero maxime laborum repellendus doloribus neque aperiam adipisci quaerat obcaecati deserunt consequuntur amet!</span><span>Sint, assumenda nisi obcaecati doloremque iste. Perspiciatis accusantium, distinctio impedit cum esse recusandae sunt. Officiis culpa dolore eius, doloribus natus, dolorum excepturi vitae fugiat ullam provident harum! Suscipit, assumenda, harum.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, nihil tenetur tempore eligendi qui nesciunt consequatur delectus accusantium consectetur ipsa, nulla doloribus dolores rerum corporis, laborum, laboriosam hic mollitia repellat.</span><span>Ab deleniti vitae blanditiis quod tenetur! Voluptatem temporibus ab eaque quis? Quis odio aliquid harum temporibus totam, ipsa eius iusto fugiat enim in, quibusdam molestiae aliquam consequatur nulla, consequuntur sint.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum odit praesentium quos, earum nesciunt laudantium illo tempora eligendi, porro doloremque mollitia neque aperiam inventore nam maxime dolor labore aspernatur molestias.</span><span>Voluptatibus provident hic cupiditate placeat, ut reprehenderit nisi eum, dolores ad sed quis. Doloribus molestiae, quae rem odit expedita soluta, facilis animi corporis velit ut in, recusandae harum laboriosam veritatis.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt repudiandae molestias magnam delectus veritatis labore, corporis dicta officia quos, ad corrupti odit! Ad hic officia maxime eveniet consectetur similique adipisci!</span><span>Quia at, nesciunt aliquid delectus ex alias voluptas maxime hic esse. Incidunt, laborum quos mollitia dolores et! Voluptas commodi asperiores, fugit quidem quis corporis, a eaque, animi, autem deserunt repellendus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi quas, voluptas hic minima inventore optio, id quidem placeat necessitatibus omnis voluptatibus vitae mollitia tempora consequuntur consequatur, illo facilis accusamus illum.</span><span>Voluptates consequuntur ipsam odit. Eius quis ipsam vitae, nihil molestias perferendis corporis recusandae consequatur vero iure blanditiis quas adipisci quos voluptatem rem illo voluptate. Eveniet officiis iure sit laborum veniam.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit a quis cumque nostrum quisquam molestiae pariatur, asperiores natus necessitatibus adipisci illum cupiditate nam vero, tempora excepturi laborum, earum. Voluptates, nobis.</span><span>Pariatur suscipit, hic blanditiis libero, iusto, quam cupiditate nam error id asperiores repellat ab consequatur vitae ipsa voluptatem totam magni reiciendis expedita maxime dolor! Minus explicabo quas, laborum ab omnis!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore qui ad assumenda placeat optio illo molestias corporis dolorum cum. Doloribus eius autem obcaecati minima, asperiores iure dignissimos ducimus suscipit dolorem.</span><span>Blanditiis earum accusamus eaque temporibus necessitatibus voluptatum dolorem enim debitis inventore assumenda quae error perspiciatis aut, nulla delectus quam ipsa sapiente ea aliquam laboriosam repudiandae. Nesciunt praesentium, beatae eos quasi!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate dicta voluptate impedit? Ad voluptatum dicta earum perferendis asperiores. Dolore distinctio modi expedita consequatur provident perspiciatis neque totam rerum placeat quas.</span><span>Eveniet optio est possimus iste accusantium ipsum illum. Maiores saepe repudiandae facere, delectus iure dolorem vitae nihil pariatur minima, reprehenderit eligendi dolore impedit, nisi doloribus quidem similique. Optio, delectus, minus.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste ex molestiae architecto enim nihil tempore, atque consequuntur doloribus recusandae sed consequatur veniam quos, in consectetur perspiciatis magni nostrum ab voluptates.</span><span>Nisi quos mollitia quis in maiores asperiores labore deserunt! Voluptate voluptas adipisci qui hic officia molestias, laborum necessitatibus sint nam vel minus incidunt perspiciatis recusandae sunt, rerum suscipit doloremque possimus!</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At nihil perferendis quae quidem facilis aliquid pariatur possimus hic asperiores, recusandae exercitationem adipisci atque laborum, delectus, odit ab reprehenderit distinctio dolor.</span><span>Non excepturi quos aspernatur repudiandae laboriosam, unde molestias, totam, sapiente harum accusamus delectus laborum ipsam velit amet nisi! Consectetur aliquam provident voluptatibus saepe repudiandae eveniet laborum beatae, animi, voluptate dolores.</span></p>
<p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque magni, eum ipsa, veritatis facere voluptatem dolorum nobis neque minus debitis asperiores iste. Pariatur sequi quam, tempora. Dignissimos, esse similique tempora.</span><span>Ex delectus excepturi autem sunt, nemo repudiandae, recusandae nostrum accusantium nobis temporibus magnam eligendi similique veritatis deleniti, eaque blanditiis possimus at! Repellat alias laboriosam ipsum commodi dolorem, corporis dolore suscipit!</span></p>- DevWL
4
1如果你仔细看的话，这很简单。也许是面向对象编程使它看起来比实际上更复杂。其他代码片段不包括破坏滚动功能。所以我发布了一个更完整的解决方案。如果你不在意，那么我的解决方案可能会显得有些过头了。为了让它在Firefox和IE中工作，你只需要添加CSS前缀。如果有人要求，我会修复它。我添加了CSS，因为我想让它成为一个“复制/粘贴”解决方案。我认为这再也不能更简单了 :-). - DevWL
好的，这不是一个前缀问题 :) 但我还是会修复它。 - DevWL
问题已解决。现在它可以在IE、FF和Chrome中正常工作了... 这里发生了什么： "document.documentElement.scrollTop" 在Firefox和IE中有效，但在Chrome中无效， "document.body.scrollTop" 在Chrome中有效，但在Firefox和IE中无效。为了解决这个问题，实现了新的方法[scrollTop()]到类原型中。新方法返回值不受浏览器影响，可以在任何浏览器中正常工作：
// var curentScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// return curentScrollTop; - DevWL
又修复了一个IE的bug。classList.add('class1, class2')只会应用class1，class2将被忽略。修复方法：classList.add('class1'); classList.add('class2'); 现在在IE加载时按钮会隐藏。 - DevWL
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
var something = $(...)之外的变量声明方法），在每个函数中重新创建大量对象（他们知道如何声明变量，但不知道放置几百个属性的var veryBigObject = {...}会对性能造成影响）。并且很多时候他们甚至不知道JavaScript是语言的名称，而不是jQuery。 - klh