0

OK, I have an HTML page that contains two scrolling divs. The two divs I have are:

content-hoo-m
content-hoo-s

In both divs I have anchored links, for example

<a href="#1">Link 1</a>
<a href="#2">Link 2</a>
<a href="#3">Link 3</a>
<a href="#4">Link 4</a>

These link to anchors in content-hoo-s.

But when you click on the links both divs start to scroll. This is the JavaScript I am using to perform this task:

<script src="js/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
(function($){
$(window).load(function(){
$("#scrollbar").mCustomScrollbar({
scrollButtons:{enable:true,scrollType:"stepped"},
keyboard:{scrollType:"stepped"},
mouseWheel:{scrollAmount:188},
theme:"rounded-dark",
autoExpandScrollbar:true,
snapAmount:188,
snapOffset:65
});
});
})(jQuery);
</script>
<script type="text/javascript">

        $("a[href*='#']").click(function(e){
                                var val=$(this).attr("href").split("#")[1]; //get just the id value
                                if($("#"+val).parents(".mCustomScrollbar").length){
                                //prevent default behavior and call method
                                //only if id is within content with custom scrollbar!
                                e.preventDefault();
                                $(".scrollbar").mCustomScrollbar("scrollTo","#"+val);
                                }
                                });


        </script>



<script>
(function($){
$(window).load(function(){
$("#scrollbar-s").mCustomScrollbar({
scrollButtons:{enable:true,scrollType:"stepped"},
keyboard:{scrollType:"stepped"},
mouseWheel:{scrollAmount:188},
theme:"rounded-dark",
autoExpandScrollbar:true,
snapAmount:188,
snapOffset:65
});
});
})(jQuery);
</script>

<script type="text/javascript">

        $("a[href*='#']").click(function(e){
                                var val=$(this).attr("href").split("#")[1]; //get just the id value
                                if($("#"+val).parents(".mCustomScrollbar").length){
                                //prevent default behavior and call method
                                //only if id is within content with custom scrollbar!
                                e.preventDefault();
                                $(".scrollbar-s").mCustomScrollbar("scrollTo","#"+val);
                                }
                                });


        </script>

Is there away in which I can target the specific div to stop both scrolling at the same time. I just want one to scroll at a time.

Any help would be greatly appreciated.

1
Contributor
1
Reply
7
Views
1 Year
Discussion Span
Last Post by squeak24
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.