javascript - Javascript 过渡

Question

我编写了一个 javascript 代码，将视口从一个链接滑到另一个链接。基本上一切都很好，你可以在那里看到http://jsfiddle.net/DruwJ/8/

我现在的问题是我想在链接时停止视口幻灯片

<input id="bottom" type="button" value="Midlle" onclick="smoothScrollTo(0, 500)">  

位于视口的底部，而不是顶部。

我希望有人知道解决方案！（我是 javascript 的初学者）

谢谢！

Answer 1

如果没有 jQuery，我能做的最好的事情是：

onclick="smoothScrollTo(document.getElementById('bottom').offsetTop + 30 - window.innerHeight)"

我假设您希望按钮的底部与页面底部对齐。而不是按钮的顶部与页面底部对齐。

这里的关键点是减去 window.innerHeight 以使按钮位于底部。我添加 30 作为按钮高度的近似值。不幸的是，我不熟悉如何在没有 jQuery 帮助的情况下获取按钮的高度。我建议在您的项目中使用 jQuery，以使所有 DOM 操作更加稳定和友好。

或者，您可以在按钮正下方添加一些虚拟 div/元素，并让系统滚动到该按钮。

onclick="smoothScrollTo(document.getElementById('dummy').offsetTop - window.innerHeight)"

见：http: //jsfiddle.net/DruwJ/10/