Overflow Div and Achored Links

[squeak24]

OK, I am working on a website in HTML.

I have an Overflow Div similar to this:

<section id="content-wide-scroll">
                      <div id="scrollbar" class="content" style="left: 10px; top: -5px">

  <!--Main Body Text -->
  <div id=“id1”></div>
  <h3>Anchor 1</h3>
  <br>
  Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. Anchor 1 text here. 
  <br><br>
  <div id=“id2”></div>
      <h3>Anchor 2</h3>
      <br>
      Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. Anchor Two text will go in here. 

    <!--End Main Body Text -->


                      </div>

                    </section>

I want to have a link outside this div and when you click on the link it scrolls to the anchor, something like this:

<a href="#id1">Anchor 1</a>
<br>
<a href="#id2">Anchor 2</a>

But when you click on the link, nothing happens.

Any idea what the problem is and how I can resolve it?

[squeak24]

OK, I am an idiot.
I have changed the following

  <div id="id1"></div>
  <h3>Anchor 1</h3>

To

    <h3 id="id1">Anchor 1</h3>

[squeak24]

just need to figure out how to smooth scroll now.

[gentlemedia]

For smooth scrolling. you will need some JavaScript. Not necessary 'need', because it can also be done with pure CSS, but works only in modern browsers.

Here's a jQuery snippet, but you will need to include the jQuery library (is a JavaScript library) as well. Just check out the demo source code what you need.

https://css-tricks.com/snippets/jquery/smooth-scrolling/

[squeak24]

OK, I have the anchor links working now. But, the issue I am now faced with is when the Anchor link is clicked the custom scroll bar for the div disapears. When I start scrolling again the scrollbar comes back, just disapears when the link is clicked.

I have found various JS, but they don't seem to fix the issue.

Any ideas what the problem may be?

[squeak24]

I have tried this:

    <script>
        var delta = 20;
        var element = $('#scrollbar').jScrollPane();
        var api = element.data('jsp');
        $('#scroll').click(function() {
                           api.scrollByY(delta);
                           });
                           </script>

But it goes back to the top of the div instead of staying put when I start scrolling, but the scroll bar still disapears.

[squeak24]

OK, I have had a play now I have had time to actually think about the code and the scrolling I am using. But instead of doing anything, the scrollbar disapears and it doesn't scroll. Here is the code:

<script type="text/javascipt">
        (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,
                    autoReinitialise: true,
                    maintainPosition: true
                });

            });
        })(jQuery);
    </script>

Any help would be appreciated.

[squeak24]

I have now tried this, but the issue is still the same

<script>
    var delta = 20;
    var element = $('#scrollbar').mCustomScrollbar();
    $('#scroll').click(function() {
                       api.scrollByY(delta);
                       });
    </script>

[squeak24]

I may add I am using mCustomScrollbar

[squeak24]

I have figure it out now.

The code I needed was:

 <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>