1

I have a horizontal list of the menu on the top of the page and the contents at the bottom. The header menu has a link to the particular sections at the bottom content. While clicking on each menu, content needs to scroll to the section with a smooth effect. I have found some styles which I want from online, but it has no horizontal scrolling to the menu section.

https://www.cssscript.com/demo/simple-scrollspy-plugin-javascript/

this is an example of my requirement, but it needs to have more menu on the top part. Also while we scrolling the contents to the bottom, the respective menu needs to scroll the visible area.

Sorry I have edited my question because I wasn't clear on my description.

this is an example while selecting menu2

this is to happen while we scroll the content area to 'section 5'

please see the active menu for both.

Yushin
  • 1,684
  • 3
  • 20
  • 36
Ranjith M
  • 11
  • 4

1 Answers1

1

Just add below css

html {
    scroll-behavior: smooth;
}

Or you can also do with jQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    jQuery(document).on('click', 'a[href^="#"]', function(e) {
        // target element id
        var id = jQuery(this).attr('href');

        // target element
        var $id = jQuery(id);
        if ($id.length === 0) {
            return;
        }

        // prevent standard hash navigation (avoid blinking in IE)
        e.preventDefault();

        // top position relative to the document
        var pos = $id.offset().top;

        // animated top scrolling
        jQuery('body, html').animate({scrollTop: pos});
    });
</script>
Jignesh Panchal
  • 1,037
  • 11
  • 29