A way to stay at top of page but switch tab and link to it

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 16, 2021 at 3:30 am #10035666
    quigley0908
    Participant

    In response to https://www.okler.net/forums/topic/linking-to-a-navigation-tab/

    Is there a way to not have the page jump down but stay at the top and only switch the navigation tab when linking to it from another page.

    Right now when I am on another page and I link to a navigation tab via a # it works, but jumps down the page a little bit (I know this is to be expected), BUT is there a way to make it stay at the top of the page but still switch navigation tabs and still # to it from another page?

    January 16, 2021 at 6:03 am #10035669
    Support
    Keymaster

    Hello,

    At really this is not related to the code we sent for you. It’s a builtin feature Porto has for scrolling to elements with ID. You can avoid it by adding the class disable-onload-scroll on the html tag:

    <html class="disable-onload-scroll">

    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

    January 16, 2021 at 8:57 am #10035676
    quigley0908
    Participant

    I added this to my code and it is still scrolling

    <!DOCTYPE html>
    <html class=”disable-onload-scroll”>
    <head>

    <!– Basic –>
    <meta charset=”utf-8″>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    Thank you for the help again, you guys are great!

    January 18, 2021 at 10:14 pm #10035688
    Support
    Keymaster

    Hello, we just made a quick test using the latest version of Porto (8.2.0) and it worked well, so if possible send us a private message with the URL of your site.

    You can also try to add the same JS code we use for that in the custom.js file:

    (js/custom.js)

    /*
On Load Scroll
*/
if( !$('html').hasClass('disable-onload-scroll') && window.location.hash && !['#*'].includes( window.location.hash ) ) {

	window.scrollTo(0, 0);

	$(window).on('load', function() {
		setTimeout(function() {

			var target = window.location.hash,
				offset = ( $(window).width() < 768 ) ? 180 : 90;

			if (!$(target).length) {
				return;
			}

			if ( $("a[href$='" + window.location.hash + "']").is('[data-hash-offset]') ) {
				offset = parseInt( $("a[href$='" + window.location.hash + "']").first().attr('data-hash-offset') );
			} else if ( $("html").is('[data-hash-offset]') ) {
				offset = parseInt( $("html").attr('data-hash-offset') );
			}

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

			$('html, body').animate({
				scrollTop: $(target).offset().top - offset
			}, 600, 'easeOutQuad', function() {
				$('body').removeClass('scrolling');
			});

		}, 1);
	});
}

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

    Kind Regards,

    Jonas

    January 19, 2021 at 2:34 am #10035690
    quigley0908
    Participant

    It’s most likely being caused by me running an older version of your template…

    That being said. Do I keep the first part of the custom JS that you gave me that actually activates the # function for the navigation tab?
    This part:
    if( $( window.location.hash ).get(0) ) {
    $(‘a[href=”‘+ window.location.hash +'”]’).trigger(‘click’);
    }

    January 19, 2021 at 4:32 am #10035698
    Support
    Keymaster

    Hello,

    Yes, that first part you need to keep on custom js file.

    Please let me know if you need further assistance.

    Kind Regards,

    Jonas

    January 19, 2021 at 8:29 am #10035704
    quigley0908
    Participant

    Yeah, that still didn’t work…I am guessing maybe my version is a lot older than the version you tested on and that might be the issue? I’m on 5.7.2 I think?

    January 19, 2021 at 11:25 am #10035705
    Support
    Keymaster

    Hi, hum, that version was released almost 4 years ago.

    Could you please send us a private message with the URL of your site so we could make a few tests and provide you the fix for it?

    Thanks.

    January 20, 2021 at 3:49 am #10035713
    quigley0908
    Participant
    This reply has been marked as private.
    January 20, 2021 at 8:04 am #10035714
    Support
    Keymaster

    Hello, OK, let’s try this new code, use this:

    $(window).on('load', function() {
	if( window.location.hash ) {
		$(window).on('load', function(){
			if( $( window.location.hash ).get(0) ) {
				window.scrollTo(0, 0);
				$('a[href="'+ window.location.hash +'"]').trigger('click');
			}
		});
	}
});

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

    Kind Regards,

    Jonas

    January 20, 2021 at 2:18 pm #10035715
    quigley0908
    Participant

    That did not work and ended up busting the hashtag function for some reason…? I think because of the first on load function.

    So what I did was, take a combo of everyone’s changes and did some research and had to add a set timeout and do 100 (instead of 1) and put in a window.focus(); in order for it to work. Once I added this everything started working properly.

    See following code:
    (I emailed it to you it wouldn’t let me put it in here if you would like to put it in to this section for others.)

    Thank you all for your help I wouldn’t have been able to figure it out without all of that!

    January 20, 2021 at 10:28 pm #10035718
    Support
    Keymaster

    Hello, it’s great that you figured it out, please let me know if you have any other questions.

    Kind Regards,

    Jonas

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

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