This website uses cookies to personalise ads and to analyse traffic ok
web design

Scroll to id within element with custom scrollbar(s)

A simple jquery function to make all links pointing to id attributes within the page, work on content with custom scrollbars.

Place the following function within a script or external .js to make all links in the form of <a href="#id">Go to #id</a> trigger the scrollTo method of custom scrollbar plugin if necessary

$(document).on("click","a[href^='#']",function(e){
  var href=$(this).attr("href"),target=$(href).parents(".mCustomScrollbar"); 
  if(target.length){
    e.preventDefault();
    target.mCustomScrollbar("scrollTo",href);
  }
});

32 Comments

Post a comment
  1. siva
    Posted on October 3, 2016 at 14:15 Permalink

    Yes it is really working and thanks

    Reply
  2. Chirag
    Posted on June 21, 2016 at 18:41 Permalink

    Here I need help to achieve scrolling to specific element,
    which I can get by the code given below, But this is scrolling with animation.

    Is there any way to remove scrolling animation while I scroll to specific element.

    Thanks!

    Reply
    • malihu
      Posted on June 24, 2016 at 00:53 Permalink

      Sure. Set the scrollInertia option of scrollTo method to 0. For instance, in the article’s code change:

      target.mCustomScrollbar("scrollTo",href);

      to:

      target.mCustomScrollbar("scrollTo",href,{scrollInertia:0});

      Reply
  3. Prajwol dangol
    Posted on March 30, 2016 at 11:18 Permalink

    Thanks man. This article saved my life !! Finally able to scroll to the targeted element inside the scrollbar enabled section.

    I am just confused about one thing, why JQuery method to scroll to element not working? Is there some reason behind this ?

    Reply
  4. Alo
    Posted on March 22, 2016 at 13:20 Permalink

    Hello,

    I came to your site here from the WordPress support site (Page scroll to id), where someone asked about mouse scroll to id. So far it seems like what I found on your site here seems to be it? Could you give me a few pointers on how to implement it in WP? I’m sorry but this is the first time implementing jquery plugins, so sorry if I seem a bit daft 🙂

    Reply
    • Alo
      Posted on March 22, 2016 at 13:26 Permalink

      A better example would probably be another “Page scroll to id” support post (https://wordpress.org/support/topic/full-page-scrolling-with-mousewheel) I saw, in which you describe a bit how to implement it into WP. Right now I have set all my sections to be 100% height with this code:

      jQuery(function($){ var windowH = $(window).height(); var wrapperH = $('#my-section').height(); if(windowH > wrapperH) { $('#my-section').css({'height':($(window).height()-71)+'px'}); } $(window).resize(function(){ var windowH = $(window).height(); var wrapperH = $('#my-section').height(); var differenceH = windowH - wrapperH; var newH = wrapperH + differenceH; var truecontentH = $('#my-section .x-container').height(); if(windowH > truecontentH) { $('#my-section').css('height', (newH-71)+'px'); } }) });

      But now I would like to set mouse scrolling to also scroll one whole section at a time. Until now I’ve been pretty much flabbergasted..

      Any help would be greatly appreciated!

      Reply
  5. Mattieu
    Posted on January 16, 2016 at 21:23 Permalink

    Hello,

    Is it possible to combine jQuery custom content scroller & Page scroll to id ?

    I’m using jQuery custom content scroller and the above code to scroll to my divs :
    $(document).on(“click”,”a[href^=’#’]”,function(e){
    var href=$(this).attr(“href”),target=$(href).parents(“.mCustomScrollbar”);
    if(target.length){
    e.preventDefault();
    target.mCustomScrollbar(“scrollTo”,href);
    }
    });

    but I would like to highlight my menu links when the div appears. I tried using Page scroll to id by it doesn’t work. Can you please tell me if it’s possible, and if it is, can you provide an example ?

    thanks !

    Reply
  6. Kuba Fencl
    Posted on November 27, 2015 at 17:57 Permalink

    Saved my day 🙂 thanks

    Reply
  7. invsm
    Posted on October 21, 2015 at 22:22 Permalink

    Hi!
    scrollTo (by id) does not always scroll to the top of the element. Sometimes it stops a few px under or above the element.
    What could be the reason?

    Reply
    • malihu
      Posted on October 22, 2015 at 00:53 Permalink

      Either the “time” of triggering the scrollTo method (e.g. is all content fully loaded?) or maybe some CSS rule… I can’t really be sure without seeing it though.

      Reply
  8. sardaukar
    Posted on September 22, 2015 at 18:35 Permalink

    hi there,
    I’m just trying to add your custom scrollbar at my sidr UL elements, and it Works, but I want to hide the body scrollbar, because now, i have two, the customized, placed and displayed as desired, but the base scroll bar appears at the sidr side.

    i’ve search around about how to hide the body scrollbars and i’ve tried setting the overflow property to hidden (Chrome), but what it hiddens was the custom one, not the base one.

    I know that you custom bars are prepared to work under a custom región or div, but I don’t know if what I’m trying to achieve is possible or not.

    kind regards.

    Reply
    • malihu
      Posted on September 22, 2015 at 18:43 Permalink

      Hi, can you send me a link or a test page?

      Reply
      • sardaukar
        Posted on September 22, 2015 at 19:19 Permalink

        hi malihu,
        the following code is the a small demo of what i have. i’d noticed that if I remove the “divlabel” DIV, all works fine, but i don’t understand why.

        <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>test sidr</title> <link href="css/jquery.sidr.dark.css" rel="stylesheet" /> <link href="css/bootstrap.css" rel="stylesheet" /> <link href="css/jquery.mcustomscrollbar.css" rel="stylesheet" /> <style type="text/css"> .content { width: 90%; height: 100%; } #search-results-wrapper { margin: 10px 10px 10px 10px; } #divlabel { background-color: red; } </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.sidr.min.js"></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript" src="js/jquery.mcustomscrollbar.concat.min.js"></script> </head> <body > <div id="bodyDIV"> <div class="top-bar-buttons"> <a id="sidr-toggle" href="#sidr" >Toggle Sidr</a> </div> <div id="sidr-right" style="width:350px" > <div id="divlabel"> <label >MY LABEL IN ANOTHER DIV:</label> </div> <div id="search-results-wrapper" class="content mCustomScrollbar"> <div id="search-results"> <ul> <li id="result-01"><a href="#">Resultat 01</a></li> <li id="result-02"><a href="#">Resultat 02</a></li> <li id="result-03"><a href="#">Resultat 03</a></li> <li id="result-04"><a href="#">Resultat 04</a></li> <li id="result-05"><a href="#">Resultat 05</a></li> <li id="result-06"><a href="#">Resultat 06</a></li> <li id="result-07"><a href="#">Resultat 07</a></li> <li id="result-08"><a href="#">Resultat 08</a></li> <li id="result-09"><a href="#">Resultat 09</a></li> <li id="result-10"><a href="#">Resultat 10</a></li> <li id="result-11"><a href="#">Resultat 11</a></li> <li id="result-12"><a href="#">Resultat 12</a></li> <li id="result-13"><a href="#">Resultat 13</a></li> <li id="result-14"><a href="#">Resultat 14</a></li> <li id="result-15"><a href="#">Resultat 15</a></li> <li id="result-16"><a href="#">Resultat 16</a></li> <li id="result-17"><a href="#">Resultat 17</a></li> <li id="result-18"><a href="#">Resultat 18</a></li> <li id="result-19"><a href="#">Resultat 19</a></li> <li id="result-20"><a href="#">Resultat 20</a></li> </ul> </div> </div> </div> <script> $(document).ready(function () { $('#sidr-toggle').sidr({ name: 'sidr-right', side: 'left' }); $("#search-results").mCustomScrollbar({ scrollButtons: { enable: true }, theme: "light-thick", scrollbarPosition: "outside" }); }); </script> </div> </body> </html>

        Reply
        • sardauka
          Posted on September 22, 2015 at 19:26 Permalink

          nevermind… i’ve found what happens. it was my foult. i only had to add the overflow:hidden to my sidr style… 🙁

          sorry for wasting your time, and mine… 🙁 i was blind, there are no more reasons…

          Reply
          • malihu
            Posted on September 22, 2015 at 19:49 Permalink

            No problem, happens to me all the time 🙂

  9. Kenn
    Posted on August 17, 2015 at 19:54 Permalink

    Hi Manos,

    thanks for the great plugin. I am struggling for a combination of the method for id attributes on the same page (as explained in this article) and the explanation you gave to francois (above my comment) for ID attributes on other pages. I believe I need a modification of the code above that works for something like:

    Go to #id

    Basically I am trying to only have one menu for all the pages, so i need to have that foo.html in front of the ID.

    Thank you and please keep up the good work.

    Reply
    • Kenn
      Posted on August 17, 2015 at 19:56 Permalink

      sorry, sucked the code. I meant

      <a href="f00.html#id">Go to #id</a>

      Reply
    • malihu
      Posted on August 20, 2015 at 02:36 Permalink

      You’ll have to add a script that scrolls to location hash (e.g. #whatever) on page load. It gets a bit complicated when you want to use standard hashes because you need to prevent the browser from immediately jumping to the id.

      I’m posting a script example:

      (function($){ var hash=window.location.hash, //get the hash (e.g. #id) href=window.location.href.replace(/#.*$/,""); //get self URL without the hash (e.g. foo.html) $(document).ready(function(){ //prevent browser jump to hash/id if(hash){ $(window).scrollTop(0).scrollLeft(0); if(window.history && window.history.pushState){ window.history.pushState("","",href); }else{ window.location.href=href; } } }); $(window).load(function(){ //call plugin to your element (e.g. .content) $(".content").mCustomScrollbar(); //scroll to location hash if(hash){ var target=$(hash).parents(".mCustomScrollbar"); if(target.length){ target.mCustomScrollbar("scrollTo",hash); } } }); })(jQuery);

      Reply
      • Kenn
        Posted on August 26, 2015 at 14:20 Permalink

        It worked almost perfect on localhost with all the content in the cache, now that it is up I have two problems:

        There are pictures with unspecific height on the pages. When I click a link with a hash on another page, it scrolls to the location but minus the height of these pictures. I could give the pictures a specific height, but that would make it more difficult for others to update the content. Is there a way to kind of “delay” the scrollto till everything is loaded?

        And on this page I got two interactive google maps. They seem to impair the scrollto location hash totally when navigating from another page.

        I guess it´s both kind of the same problem.

        I would be grateful for any suggestions.

        Reply
        • malihu
          Posted on September 12, 2015 at 14:07 Permalink

          I haven’t being able to reproduce the issue with the non-cached images (tested it on Chrome, Firefox and IE). It seems to be scrolling to the “correct” position.

          The scrollTo event is already called when everything is loaded (called within $(window).load()) but you could add an extra delay if you want by adding a timeout, e.g. 300 milliseconds:

          setTimeout(function(){ target.mCustomScrollbar("scrollTo",hash); }, 300);

          Reply
  10. Patrik Lindström
    Posted on May 9, 2015 at 20:48 Permalink

    Hi! How would this script work if I want to have it on document ready? So when document is ready, it scroll down to the div id?

    Thanks!

    Reply
    • malihu
      Posted on May 9, 2015 at 21:43 Permalink

      Can you provide an example of what you want to do? Scroll to address bar hash or?

      Reply
  11. François
    Posted on May 1, 2015 at 19:59 Permalink

    Hello there,

    How about when the link is on another web page ?

    For example, smalltest.html#p2 on a specific page, let’s say test.html

    and on smalltest.html

    How can I make it so it uses your plugin to scroll and not the default browser one ?

    Reply

Post a comment

Your e-mail is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
You can write or copy/paste code directly in your comment using the <code> tag:
<code>code here...</code>
You may also use the data-lang attribute to determine the code language like so:
<code data-lang-html>, <code data-lang-css>, <code data-lang-js> and <code data-lang-php>

css.php