如何使鼠标滚轮滚动到截面，如在mediafire.com

我遇到了这个网站http://www.mediafire.com/的主页，当你滚动鼠标滚轮时，页面自动定位到页面的下一部分。 我想知道它是如何完成的。 谁能帮我这个。 提前致谢。

此致，Aswin

Answer 1

我认为这种类型的动画可能很难被接受，尤其是jQuery的新手。 这包括滚动，捕捉鼠标滚轮事件，动画延迟，以及最重要的是让它在跨浏览器和移动浏览器的滑动和触摸事件上正常工作。 如果您没有扎实的理解，我建议您使用插件。 这两个是最好的： 一页滚动和整页 。

我只能向您展示如何在跨浏览器上完成此操作的基本方法，如果您希望它在移动设备上正常工作，您应该尽自己的一份力并添加滑动和触摸事件。 🙂

//Set each section's height equals to the window height $('section').height($(window).height()); /*set the class 'active' to the first element this will serve as our indicator*/ $('section').first().addClass('active'); /* handle the mousewheel event together with DOMMouseScroll to work on cross browser */ $(document).on('mousewheel DOMMouseScroll', function (e) { e.preventDefault();//prevent the default mousewheel scrolling var active = $('section.active'); //get the delta to determine the mousewheel scrol UP and DOWN var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1; //if the delta value is negative, the user is scrolling down if (delta < 0) { //mousewheel down handler next = active.next(); //check if the next section exist and animate the anchoring if (next.length) { /*setTimeout is here to prevent the scrolling animation to jump to the topmost or bottom when the user scrolled very fast.*/ var timer = setTimeout(function () { /* animate the scrollTop by passing the elements offset top value */ $('body, html').animate({ scrollTop: next.offset().top }, 'slow'); // move the indicator 'active' class next.addClass('active') .siblings().removeClass('active'); clearTimeout(timer); }, 800); } } else { //mousewheel up handler /*similar logic to the mousewheel down handler except that we are animate the anchoring to the previous sibling element*/ prev = active.prev(); if (prev.length) { var timer = setTimeout(function () { $('body, html').animate({ scrollTop: prev.offset().top }, 'slow'); prev.addClass('active') .siblings().removeClass('active'); clearTimeout(timer); }, 800); } } }); 

这是一个演示： jsfiddle.net/NGj7F/