Javascript 转换

Question

我编写了一个 javascript 代码，可以将视口(viewport)从一个链接滑动到另一个链接。基本上一切正常，你怎么能在那里看到http://jsfiddle.net/DruwJ/8/

我现在的问题是我想在链接时停止视口(viewport)滑动

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

位于视口(viewport)的底部而不是顶部。

我希望有人知道解决方案! (我是 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/