如何使用鼠标滚轮跳转到html中的下一个或上一个＃部分

Question

我的网站包含顶部导航菜单：

<nav id="menu">
    <ul id="menu-nav">
        <li class="current"><a href="#home-slider">Home</a></li>
        <li><a href="#Cakes">Cakes</a></li>
        <li><a href="#Candy">Candy</a></li>
        <li><a href="#Marshmellow">Marshmellow</a></li>
        <li><a href="#Honey">Honey</a></li>
     </ul>
 </nav>

我的所有部分都是：

<div id="Cakes" class="page">
    <div class="container">
        This is sweet
    </div>
</div>

如何使用鼠标滚轮直接跳到下一个或上一个部分？

目前鼠标滚轮将像往常一样滚动页面。但是我想让它在没有滚动整个页面的情况下跳转到每个部分，只需一个轮子旋转。

Answer 1

没有插件，我们需要做的就是使用mousewheel事件来捕获鼠标滚轮 - 我们使用DOMMouseScroll代替的 - 并且取决于事件的值＆ ＃39; s originalEvent.wheelDelta - 再次在Firefox中originalEvent.detail，感谢Firefox - 如果此值为 正面 然后用户向上滚动，如果它 否定 则方向向下。

JS Fiddle 1

jQuery ^{（ 1 ）}：

//initialize
var winHeight = $(window).height(),
    pages = $('.page'),
    navLinks = $('#menu-nav a'),
    currentPage = 0;

$('html, body').animate({ scrollTop: 0}, 0);

// listen to the mousewheel scroll       
$(window).on('mousewheel DOMMouseScroll', function(e){

    //by default set the direction to DOWN
    var direction = 'down',
    $th = $(this),
    // depending on the currentPage value we determine the page offset
    currentPageOffset = currentPage * winHeight;

    // if the value of these properties of the even is positive then the direction is UP
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
        direction = 'up';
    }

   // if the direction is DOWN and the currentPage increasing won't exceed
   // the number of PAGES divs, then we scroll downward and increase the value
   // of currentPage for further calculations.
   if(direction == 'down' && currentPage <= pages.length - 2){
       $th.scrollTop(currentPageOffset + winHeight);
       currentPage++;
   } else if(direction == 'up' && currentPage >= 0) {
       // else scroll up and decrease the value of currentPage IF the direction
       //  is UP and we're not on the very first slide
       $th.scrollTop(currentPageOffset - winHeight);
       currentPage--;
   }
});

// as final step we need to update the value of currenPage upon the clicking of the
// navbar links to insure having correct value of currentPage
navLinks.each(function(index){
    $(this).on('click', function(){
    navLinks.parent().removeClass('current');
    $(this).parent().addClass('current');
    currentPage = index;
  });
});

^{（ 1 ）} 更新

如果您不想使用jQuery，下面的纯 javascript代码与上述相同，但这不会在IE8及以下版本中运行：

JS Fiddle 2

Pure Javascript：

//initialize
var winHeight = window.innerHeight,
  pages = document.getElementsByClassName('page'),
  navLinks = document.querySelectorAll('#menu-nav a'),
  currentPage = 0;

window.addEventListener('mousewheel', function(e) {
  scrollPages(e.wheelDelta);
});
window.addEventListener('DOMMouseScroll', function(e) {
  scrollPages(-1 * e.detail);
});

function scrollPages(delta) {
  var direction = (delta > 0) ? 'up' : 'down',
    currentPageOffset = currentPage * winHeight;

  if (direction == 'down' && currentPage <= pages.length - 2) {
    window.scrollTo(0, currentPageOffset + winHeight);
    currentPage++;
  } else if (direction == 'up' && currentPage > 0) {
    window.scrollTo(0, currentPageOffset - winHeight);
    currentPage--;
  }
}

for (var i = 0; i < navLinks.length; i++) {
  navLinks[i].addEventListener('click', updateNav(i));
}

function updateNav(i) {
  return function() {
    for (var j = 0; j < navLinks.length; j++) {
      navLinks[j].parentNode.classList.remove('current');
    }
    navLinks[i].parentNode.classList.add('current');
    currentPage = i;
  }
}

Answer 2

您需要获取插件才能添加mousewheel事件。 也许试试这个this。 它有很好的例子。