Title: Mouse Wheel Scroll
Last modified: August 30, 2016

---

# Mouse Wheel Scroll

 *  [Ibby](https://wordpress.org/support/users/ibby/)
 * (@ibby)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/mouse-wheel-scroll/)
 * Hi Malihu,
 * Thank you so much for this plugin, it is wonderful and flexible and I am using
   it in one of my latest designs that I am currently building for a client.
 * I have been trying to set up the plugin to auto-scroll to the next/previous anchor
   using the mousewheel script you provided in another post:
 *     ```
       <script src="http://new.enhanceltd.com/wp-content/themes/kapital/js/jquery.mousewheel.min.js"></script>
       <script>
       (function($){
       $(window).load(function(){
   
       /* bind mousewheel event on document */
       $(document).mousewheel(function(e){
           e.preventDefault();
           var section=$("#content > section"), /* define your sections selector (change to your selector) */
               currentTarget=$(".mPS2id-target"), /* define the current section */
           /*
           if mouse-wheel delta is less than zero scroll-to next section from current
           if mouse-wheel delta is greater than zero scroll-to previous section from current
           */
           to=e.deltaY<0 ? currentTarget.next().attr("id") : currentTarget.prev().attr("id");
           /* if variable to is defined, use plugin's scrollTo method to programmatically scroll to target */
           if(to){
               $.mPageScroll2id("scrollTo",to);
           }
       });
   
       });
       })(jQuery);
       </script>
       ```
   
 * However, though my static links are working, my scroll wheel has completely stopped
   working. Is there a way to fix this?
 * You can view my working page here: [http://new.enhanceltd.com/services-3/](http://new.enhanceltd.com/services-3/)
 * [https://wordpress.org/plugins/page-scroll-to-id/](https://wordpress.org/plugins/page-scroll-to-id/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/mouse-wheel-scroll/#post-6604091)
 * You have to change the script to match your target elements selector.
    Your markup
   looks like this:
 *     ```
       <div class="page-content">
         <p>...</p>
         <div id="section-1">...</div>
         <p>...</p>
         <div id="section-2">...</div>
       </div>
       ```
   
 * so in the script you have to do something like:
 *     ```
       to=e.deltaY<0 ? currentTarget.next().next().attr("id") : currentTarget.prev().prev().attr("id");
       ```
   
 * The `e.preventDefault();` part in `mousewheel` event is the line that prevents
   the default mouse-wheel scrolling behavior (on the whole document). This is something
   you normally want when using the mouse-wheel to scroll through sections, otherwise
   it’ll scroll the page at the same time.
 *  Thread Starter [Ibby](https://wordpress.org/support/users/ibby/)
 * (@ibby)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/mouse-wheel-scroll/#post-6604166)
 * Perfect!
 * It worked flawlessly. I’m a bit confused why I needed to duplicate the .next()
   and .prev() tags though. Could you please explain why this is the case?
 * I’m still quite an amateur at JS so please bare with me.
 *  Plugin Author [malihu](https://wordpress.org/support/users/malihu/)
 * (@malihu)
 * [10 years, 8 months ago](https://wordpress.org/support/topic/mouse-wheel-scroll/#post-6604182)
 * jQuery `next()` gets the element that’s **immediately following** the selector.
   In this case, the one defined in `currentTarget` variable.
 * So in your markup, `currentTarget.next()` gets the next paragraph, but we want
   to get the next target section which is after the paragraph, so we do: `currentTarget.
   next().next()` to skip the `<p>` elements 😉
 * Same thing with `prev()` but in reverse.
 * If your markup was:
 *     ```
       <div class="page-content">
         <div id="section-1">...</div>
         <div id="section-2">...</div>
       </div>
       ```
   
 * we would simply do `currentTarget.next()` because each target section would be
   right next to each other.
 * [Function info in jQuery docs](https://api.jquery.com/next/)

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Mouse Wheel Scroll’ is closed to new replies.

 * ![](https://ps.w.org/page-scroll-to-id/assets/icon-256x256.png?rev=1401043)
 * [Page scroll to id](https://wordpress.org/plugins/page-scroll-to-id/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/page-scroll-to-id/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/page-scroll-to-id/)
 * [Active Topics](https://wordpress.org/support/plugin/page-scroll-to-id/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/page-scroll-to-id/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/page-scroll-to-id/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [malihu](https://wordpress.org/support/users/malihu/)
 * Last activity: [10 years, 8 months ago](https://wordpress.org/support/topic/mouse-wheel-scroll/#post-6604182)
 * Status: not resolved