CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Ranjith M
Ranjith M

Reputation: 11

Need to show active menu from a horizontal scrolling menu list while a scrolling the content to bottom

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.

Upvotes: 1

Views: 895

Answers (1)

Jignesh Panchal
Jignesh Panchal

Reputation: 1376

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>

Upvotes: 1

Related Questions