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);
}
});
Team, I am using this scrollbar in my project to display the all categories in horizontal view.
Now when I scroll left and choose the end category so page load with that particular category result
But the page is not redirecting or not showing that selected category on the front after page load. I have to scroll the scrollbar again.
I tried with scrollto option but it didn’t work.
Great plugin. Just facing an obstacle with integrating bootstrap scroll spy and mcustomscrollbar. When I enable the mcustomscrollbar bootstrap scroll spy stop working.
Looking forward to your response.
Thanks in advance
Hi,
Plugin is not compatible in IE. Even there is a scroll bar where I don’t have scrolling. Means in each div it is showing scroll bar even though there is scroll or not.
Any suggestion?
Hi, I’m using the mCustomScrollbar, it is nice..
I have a problem and after many efforts I wasn’t able to find the solution, I’m working on ASP.net project and I’ve made a master page that has a scrollable div named “MPageContent” (content place holder), everything works fine till now, I’ve used the following code in the master page:
(function ($) {
$(window).on(“load”, function () {
$(“#MPageContent”).mCustomScrollbar({
setHeight: 515,
theme: “inset-2-dark”
});
});
})(jQuery);
the problem appeared when I used a scrollable multiline textbox inside the content page (multiline textbox inherits from textarea), I applied the mCustomScrollbar to the multiline textbox, the mCustomScrollbar works inside the textbox, but everytime the multiline textbox receives focus, the MPageContent (Parent div in the master page) losses its current position and returns to top page (as if there was a postback)… I will really appreciate any help, thanks.
Dear Malihu
My name is Reka, I now learn informatica.
First: I like your site, very intersting the srollbar.
Unfortunately, I dont can make my code.
Please help me, if He has time.
Sorry, but I very bad speak english.
<div class="control"> <a href="#['top',null]" rel="content-yx" class="backtotop">TOP</a> </div>I learn Html and css, I make mCustomScrollbar code, but not work.
My code is work, if no mCustomScrollbar, but together not work 🙁
<!-- Back To Top --> <script type="text/javascript"> $(document).ready(function () { $(window).scroll(function () { if ($(this).scrollTop() > 100) { $('.backtotop').fadeIn(); } else { $('.backtotop').fadeOut(); } }); $('.backtotop').click(function () { $("html, body").animate({ scrollTop: 0 }, 800); return false; }); }); </script>I verry verry thanks,
Greetings
Reka
$timeout(function (){ $(".dashboard-menu, .accordion-container, .participants-detail-container, .events-view .events-month, .table-scroll, .table-scroll tbody, .multi-chk-bx").mCustomScrollbar({ axis:"yx", scrollButtons:{enable:true}, advanced:{autoScrollOnFocus:false}, theme:"minimal", scrollbarPosition:"outside" }); $(".page-container, .output-container, .jdash-widget .jdash-body, .dashboard-container, .alert-popup .alert-popup-pane, .player-listings, .sidebar, .msg-container ul, .msg-log .msg-history, .pgm-listings").mCustomScrollbar({ axis:"y", scrollButtons:{enable:true}, advanced:{autoScrollOnFocus:false}, theme:"minimal", scrollbarPosition:"outside" }); $('#msg-history').mCustomScrollbar('scrollTo', 'last'); });In my above code, #msg-history only scrollto Last action…. But all of my scrollable element also scrollto Last… Any idea…
hey..
i’m using your costume scrolling plugins my site scrolling too slow plz tell me how to increase scrolling speed using this costume scrollbar?
Yes it is really working and thanks
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!
Sure. Set the
scrollInertiaoption of scrollTo method to0. For instance, in the article’s code change:target.mCustomScrollbar("scrollTo",href);to:
target.mCustomScrollbar("scrollTo",href,{scrollInertia:0});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 ?
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 🙂
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!
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 !
You cannot use the two scripts on the same element as ‘Page scroll to id’ requires browser’s native/default scrollbar.
What you can do is use plugin’s jQuery expressions (see “Plugin-specific jQuery expressions” section at the end of plugin post) to do something like:
$(selector).mCustomScrollbar({ callbacks:{ whileScrolling:function(){ if($("#some-id").is(":mcsInView")){ $("a[href='#some-id']").addClass("highlight-class"); }else{ $("a[href='#some-id']").removeClass("highlight-class"); } } } });Hope this helps
Thanks for your reply, I tried with your solution, but it doesn’t work fine… the menu a get the class but only for a few seconds… the classe change when the div appears, and briefly disappears when scrolling… is it possible for you to have a look ? would help ! if not I will have to find another solution but your plugin is really perfect for what I’m doing ! thanks a lot for your time and help !
The menu item gets the class when the target div appears in scrolling viewport. The class is removed when the target div gets out of the scrolling viewport. Isn’t this the case?
I’ve made tests and the above behavior should happen. If it’s not I’d have to see your page/code in order to help.
Hello
thanks for your reply.
no it’s not the case.
how can I send you my website adress ? I would like to keep it private.
please let me know !
thanks a lot
Mattieu
http://manos.malihu.gr/contact/
$("#some-id").is(":mcsInView"))return allways false;
what could be wrong?
if($("#some-id").is(":mcsInView")){allways false;
what could be wrong?
Thank you and please help me at this point:
I put this below code in my website but it always return false for everycase:
if($(“#id1”).is(“:mcsInView”)) {
}
if($(“#id2”).is(“:mcsInView”)) {
}
Saved my day 🙂 thanks
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?
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.
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.
Hi, can you send me a link or a test page?
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>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…
No problem, happens to me all the time 🙂
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.
sorry, sucked the code. I meant
<a href="f00.html#id">Go to #id</a>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);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.
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);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!
Can you provide an example of what you want to do? Scroll to address bar hash or?
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 ?
Hey, I just replied to you in your original comment here:
http://manos.malihu.gr/jquery-custom-content-scroller/comment-page-64/#comment-19511
Let me know if this helps