javascript - 滚动到顶部功能不起作用(显示为未定义)

Question

我的一位同事创建了以下函数:

function scrolltotop() { scroll(document.body,document.body.scrollTop,0,500,0); }

滚动代码如下:

 function scroll(ele,from,to,duration,time) {
   if (from<=0) from=0;
   if (to<=0) to=0;
   if (time>=duration) return;
   var delta=(to-from);
   var progress=time/duration*Math.PI/2;
   var pos=delta*Math.sin(progress);
   setTimeout(function() { ele.scrollTop=from+pos; 
    scroll(ele,from,to,duration,time+10) },10
   );
}

它曾经很好用，但现在不再有效了。当我转到控制台并输入:

scrolltotop(无括号) 它返回函数声明。

现在，如果我尝试使用括号执行该函数，它会显示 undefined。

这是怎么回事？它曾经工作正常吗？

注意:我的 javascript 文件位于页面底部，但此函数仅在加载底部文件后调用。

Answer 1

您同事的功能很好，但我建议他使用 requestAnimationFrame 而不是 setTimeout。

没有滚动的原因是 document.body。在某些浏览器(例如 Safari)上，文档的滚动应用于 body 元素。所以你的代码可能适用于 Safari。但是在 Chrome 和 Firefox 上，滚动应用于 html 元素。

我认为使用 document.documentElement 适用于所有浏览器。如果它有效，请告诉我。

function scrolltotop() { scroll(document.documentElement,document.documentElement.scrollTop,0,500,0); 
}

 function scroll(ele,from,to,duration,time) {
   if (from<=0) from=0;
   if (to<=0) to=0;
   if (time>=duration) return;
   var delta=(to-from);
   var progress=time/duration*Math.PI/2;
   var pos=delta*Math.sin(progress);
   requestFrame(function() { ele.scrollTop=from+pos; 
    scroll(ele,from,to,duration,time+10) });
}


var requestFrame = function() { // requestAnimationFrame cross browser
		return (
			window.requestAnimationFrame ||
			window.webkitRequestAnimationFrame ||
			window.mozRequestAnimationFrame ||
			window.oRequestAnimationFrame ||
			window.msRequestAnimationFrame ||
			function(func) {
				window.setTimeout(func, 1000 / 50);
			}
		);
	}()

body{
  font-size: 32pt;
}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
<br>
<input type="button" value="Go to Top" onclick="scrolltotop()">

哦，关于那个 undefined:那只是被调用函数的返回值，在你的情况下是 undefined 因为你没有返回任何东西。