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 (no parenthesis)它返回函数声明。

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

这里发生了什么？以前工作得很好吗？

注意：我的javascript文件位于页面底部，但只有在加载底部文件后才会调用此函数。

Answer 1

您的同事的功能很好，我建议他使用requestAnimationFrame代替setTimeout。

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

我认为使用document.documentElement适用于所有的borwsers。如果有效，请告诉我。

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，因为你没有返回任何东西。

滚动到顶部功能不起作用（显示为未定义）

1 个答案: