One page menu smooth scroll

Home Forums Joomla Templates Envor — Fully Multipurpose Joomla Template One page menu smooth scroll

This topic contains 10 replies, has 2 voices, and was last updated by  fiogos 10 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #11175

    fiogos
    Participant

    Unknow

    Hello!

    Is there an option if I want to create a menu for an item inside the home page, to have a smooth scroll to it?
    I’ve created the menu (by adding a Section ID fro Azura)
    and the link directs to it
    but there is no smooth scroll.

    Thank you for your time!

    #11181

    CTHthemes
    Keymaster

    Hi,

    1, add the code bellow to your envor.js file (like in this screenshot: http://prntscr.com/d5ryhj )

    
    //custom scroll
    jQuery(".custom-scroll-link, .scroll-link-to-a a").on("click", function() {
        var a = 110;
        if (location.pathname.replace(/^\//, "") == this.pathname.replace(/^\//, "") || location.hostname == this.hostname) {
            var b = jQuery(this.hash);
            b = b.length ? b : jQuery("[name=" + this.hash.slice(1) + "]");
            if (b.length) {
                jQuery("html,body").animate({
                    scrollTop: b.offset().top - a
                }, {
                    queue: false,
                    duration: 1200,
                    easing: "easeInOutExpo"
                });
                return false;
            }
        }
    });
    

    2, edit the menu item to add custom-scroll-link to CSS Link Classes field.

    #11192

    fiogos
    Participant

    Unknow

    I can’t thank you enough for the GREAT SUPPORT!!!
    THANK YOU one more time!
    You saved me hours of searching!!

    #11199

    CTHthemes
    Keymaster

    Thank you.

    #11228

    fiogos
    Participant

    Unknow

    Hello again!
    The above solution works great.
    I’m trying to add some menus that will link inside the homepage and the menus work when I click them from the homepage.

    Let’s say that the desired menu is an external link (example.com/#123)
    When I try to click it from another page (let’s say example.com/contact), the menu won’t link to the part of the homepage but it will just add the link to the current (example.com/contact/#123) and won’t go to example.com/#123

    Any ideas?
    Thank you!

    #11252

    CTHthemes
    Keymaster

    Hi, please use full link ( example.com/#123 ) for your menu item instead of #123

    #11360

    fiogos
    Participant

    Unknow
    This reply has been marked as private.
    #11367

    CTHthemes
    Keymaster
    This reply has been marked as private.
    #11372

    fiogos
    Participant

    Unknow
    This reply has been marked as private.
    #11389

    CTHthemes
    Keymaster

    There is only way to fix:

    1, edit the script http://prntscr.com/dann1o

    2, Add 110px spacing above your sections OR use anchor which above your section content 110px;

    http://prntscr.com/danokm

    #11393

    fiogos
    Participant

    Unknow

    THANK YOU SO MUCH!!!!!!!
    That worked!!
    Have a nice day!

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘One page menu smooth scroll’ is closed to new replies.