Scrolling on the top of the page when clicking a tab

  • Resolved plinakos

    (@plinakos)


    3 years ago

    When clicking on a tab the page scrolls to the top.
    I changed the # to \\#, as per template dev mentioned in his forum, in parallax function but do not add any other code, as you mentioned, in order not to cause any damage. The closed ticket instructions do not mention where to add the code! So the problem was not solved in my case!

    Code section follows

    /*parallax scolling*/
    var at_scrollTop_fix = 1;
    top_header_height = 68;
    $('a[href*="\\#"]').click(function(event){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top-$('.at-navbar').height() - top_header_height
        }, 1000);
        event.preventDefault();
    });
    /*bootstrap sroolpy*/
    $("body").scrollspy({target: ".navbar-fixed-top", offset: $('.at-navbar').height()+50 } );

    /*parallax*/
    function mercantile_parallax_fixed(){
        var is_iPad = navigator.userAgent.match(/iPad/i) != null;
        if ( is_iPad ){
            jQuery('.at-parallax,.inner-main-title').each(function() {
                jQuery(this).css('background-attachment','');
            });
        }
        else{
            if ($(window).width() > 767) {
                jQuery('.at-parallax,.inner-main-title').each(function() {
                    jQuery(this).parallax('center', 0.2, true);
                    jQuery(this).css('background-attachment','fixed');
                });
            }
            else{
                jQuery('.at-parallax,.inner-main-title').each(function() {
                    jQuery(this).css('background-attachment','');
                });
            }
        }
    }
    mercantile_parallax_fixed();
    // disable skrollr if the window is resized below 768px wide
    $(window).on('resize', function () {
        mercantile_parallax_fixed();
    });

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • jpowersdev

    (@jpowersdev)

    Hi @plinakos,

    I’m not sure what past thread you are referring to, could you provide a little more information? The code you have mentioned here is not part of our plugin. That being said, I can provide some direction.

    The code as follows does the “scrolling” action:

    $('a[href*="\\#"]').click(function(event){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top-$('.at-navbar').height() - top_header_height
        }, 1000);
        event.preventDefault();
    });

    It basically says “anytime an anchor tag with a # at the beginning of the URL is clicked, scroll to the top of that element minus the height of the navbar”. The problem is, your tabs are hidden when you compute the offset, so it will always be 0. If you chain a .parent() before the .offset(), it will solve your problem, but it will interfere with any other matching anchor tags that aren’t tabs.

    You could do a check before the $('html, body').animate({ line to determine if the current link is a tab and if so, set the desired scroll position to that of the parent container, otherwise do it the way it is currently defined.

    Let me know if that helps,
    Jon

Viewing 1 replies (of 1 total)
  • The topic ‘Scrolling on the top of the page when clicking a tab’ is closed to new replies.