Question

我有一页website，我需要像this website这样的效果。当用户向下滚动时，它应向右滚动到下一页。您可以通过打开chrome中的第二个链接并尝试上下滚动来测试该效果。我知道没有什么，但我已经尝试过研究一切可能的事情，我只是想办法顶级甚至开始这个功能。我不需要用勺子喂食，所以只要给我一个开始就指出正确的方向，我会尝试做其余的事情。感谢。

Answer 1

以下是我的建议：首先，您需要了解核心功能。尝试调试网站并搜索效果的负责文件。

首先，您应该学习HTML5，CSS3和Accordions。 HTML5将帮助您改进滚动功能。 CSS3对于效果是可靠的。 “accordion”是从您在菜单上单击的链接直接滚动到页面的效果名称。

问题在于使用HTML5，您会发现一些跨浏览器的问题。一个简单的解决方法是使用html5shive.js，“强制”IE了解HTML5标签。

另一种方法是使用jQuery，它可以毫无困难地为您提供相同的效果。你应该寻找“带有平滑滚动的jQuery导航”。

你也可以只使用手风琴，这样更容易。

左侧边栏允许您点击链接并引导您进入具有滚动效果的页面。这是一个手风琴，结合了jQuery。如果您不假装包含带链接的菜单，则只能使用jQuery进行滚动。

这是一个很好的开始：jsfiddle.net/7ZVb7/1383 /

：）

Answer 2

这是如何完成的：

function scrollingBaby(e) {
var t = Math.floor(e.pageY / $(window).height());
e.wheelDeltaY < 0 ? t++ : e.wheelDeltaY > 0 && t--;
var n = $(".winHeight").size();

n--;
t < 0 ? t = 0 : t > n && (t = n);
//alert(t);
console.log($('.moveThis'+t).offset().top);
$("html,body").animate({
    //scrollTop: $(window).height() * t
    scrollTop: $('.moveThis'+t).offset().top
}, 400, "easeInOutExpo", function () {
    setTimeout(function () {
        onAnimation = !1
    }, 1200)
})
}

var slideActual = 0,
flag = 0,
reveal = 1,
revealPro = 0,
offset = 0,
heightInfo = 0,
widthInfo = 0,
onAnimation = !1;
(function (e) {
var t = navigator.platform.toUpperCase().indexOf("WIN") !== -1;

window.onmousewheel = document.onmousewheel = function (e) {
    e = e || window.event;
    e.preventDefault && e.preventDefault();
    if (onAnimation == 0) {
        onAnimation = !0;
        scrollingBaby(e)
    }
    e.returnValue = !1
};
t && IE8JETEMMERDE();
sliderSize();
setTimeout(function () {
    checkImageSize()
}, 800);
countMedia(1)
})(jQuery);

在其中，“。winHeight”是所有“页面”或div上的类，需要以这种方式设置动画，并且'.moveThis0'，'。moveThis1'等是应用的类我们可以收集div的偏移并将它们引导到页面的顶部。

控制webkit浏览器上的滚动

2 个答案: