Scroll effect

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • March 5, 2021 at 8:03 pm #10036679
    frankict
    Participant

    Hello,
    I need to have the same scrolling effect of this landing page

    https://www.okler.net/previews/porto/8.3.0/demo-seo.html

    On my page If I click on “AZIENDA” (top) everything seems to work but I need the same scroll effect. Which js am I missing ?

    Thanks

    March 5, 2021 at 8:03 pm #10036680
    frankict
    Participant
    This reply has been marked as private.
    March 6, 2021 at 12:09 am #10036692
    Support
    Keymaster

    Hello,

    Please try changing the HTML of the link to:

    <a href="#azienda" data-hash data-hash-offset="90">Azienda</a>

    * The data-hash attribute enable this smooth scrolling.

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.

    If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

    March 6, 2021 at 12:24 am #10036694
    frankict
    Participant

    Hi Rodriguo this seems to work but how to manage the “active” class just like the demo ( https://www.okler.net/previews/porto/8.3.0/demo-seo.html ) ?
    When I scroll the demo the highlighted section got a different colour using “active”. How to do this?

    Thanks

    March 6, 2021 at 12:38 am #10036699
    Support
    Keymaster

    Hello,

    For that, please change the <body> tag to:

    <body data-bs-target="#header" data-bs-spy="scroll" data-bs-offset="100">

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.

    If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

    March 6, 2021 at 1:27 am #10036701
    frankict
    Participant

    Hi Rodriguo,
    done but nothing is changed.
    Could you kindly double check this ?

    March 6, 2021 at 6:31 am #10036706
    Support
    Keymaster

    Hello,

    Oh Sorry!

    My mistake!

    The correct code is without the prefix -bs. Please try with: 

    data-target="#header" data-spy="scroll" data-offset="100"

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.
    If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

    March 9, 2021 at 1:01 am #10036740
    frankict
    Participant

    Hi Rodriguo,
    nothing. The scroll effect seems to work but the “active” is still missing.

    What Am I doing wrong?

    March 9, 2021 at 1:49 am #10036742
    Support
    Keymaster

    Hello,

    We are almost there!

    It’s missing the class dropdown-item in the anchor elements of menu items. Change to:

    <a class="dropdown-item" data-hash href="#home">

    * Do the same for all items.

    The data-spy plugin required the dropdown-item class in the navigation links.

    This will definitely resolve the issue!

    Please try that and let us know if you need further assistance.

    Kind Regards,

    Rodrigo.

    If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

    March 9, 2021 at 6:32 pm #10036761
    frankict
    Participant

    Hi Rodriguo,
    this seems to work but now there is a really strange behaviour.

    If I click on “LAVORA CON NOI” (last nav element) everything seems to break ……
    After that click the other click got something like an huge delay and bounce to “LAVORA CON NOI” everytime. Probably I cannot focus footer ?

    So sorry to bother you again 🙁

    Awaiting yours,

    March 10, 2021 at 1:55 am #10036774
    Support
    Keymaster

    Hello,

    Oh sorry, that’s a bug that surged in our latest updates. For now to fix, please add this custom JS code below at (js/custom.js):

    $.extend( theme.Nav, {
    scrollToTarget: function(target, offset, stopFlag) {
        var self = this;

        $('body').addClass('scrolling');

        $('html, body').animate({
            scrollTop: $(target).offset().top - offset
        }, self.options.scrollDelay, self.options.scrollAnimation, function() {
            $('body').removeClass('scrolling');

            // If by some reason the scroll finishes in a wrong position, this code will run the scrollToTarget() again until get the correct position
            // We need do it just one time to prevent infinite recursive loop at scrollToTarget() function
            if( !theme.fn.isElementInView( $(target) ) ) {
                if( stopFlag == false ) {
                    self.scrollToTarget( target, offset, false );
                    stopFlag = true;
                }
            }
        });

        return this;

    }
} );

    We already addressed to fix this bug in the next version of Porto.

    Hope this helps!

    Thanks for your patience!

    Kind Regards,

    Rodrigo.

    If you are satisfied with Porto HTML and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

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

This topic is marked as "RESOLVED" and can not rceive new replies.