我有以下脚本和页面布局 - http://jsfiddle.net/wLkYg/,它允许用户在我的网站上上下滚动,并带有简洁的 javaScript 摆动效果。
但是,由于我现在想将内容(上面 jsfiddle 示例中的彩色 #div
框)彼此相邻/并排排列,因此它失去了滚动效果 - http://jsfiddle.net/UjeZH/ .
我如何才能在第二个示例中实现与第一个示例相同的转换?
最佳答案
我已经为您准备好了您需要的两个版本。
Version 1: Div
s on top of each other
Version 2: Div
s on top and next to each other
检查它们并告诉我它们是否适合您的需要。 两个版本的设计方式都使每个 div 都具有页面的高度和宽度。
第一个版本没有摇摆效果,但你可以通过以下方式添加:
包括 jQuery
添加如下JS(同第二个版本)
var $root = $('html, body'); $('a').click(函数 () {
$root.animate({ scrollLeft: $($.attr(this, 'href')).offset().left, scrollTop: $($.attr(this, 'href')).offset().top }, 500); return false;
});
此外,如果您使用上面的代码,它会解决您的问题,因为它允许您垂直和水平滚动。您拥有的代码只允许您垂直滚动,这就是当您水平对齐 div 时它不起作用的原因。
关于javascript - .js 页面左右滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18435981/