scroll to element on new page

9 replies · opened Feb 10, 2020

SstookyFeb 10, 2020

I am using this code to scroll to an element on a a new page (script is located bottom of page)

	
	    jQuery(document).ready( function(){
	        setTimeout(function() {
	            if (location.hash) {
	                window.scrollTo(0, 0);
	            }
	        }, 1000);
	    });
	
	    jQuery(window).on('load', function(){
	        var divScrollToAnchor = window.location.hash;
	
	        if( typeof divScrollToAnchor !== 'undefined' ) {
	            var t = setTimeout( function(){
	                jQuery('html,body').stop(true).animate({
	                    'scrollTop': jQuery(divScrollToAnchor).offset().top - 80
	                }, 700, 'easeOutQuad');
	            }, 1000);
	        }
	    });

it workz but the console throws the following error:

TypeError: undefined is not an object (evaluating 'jQuery(divScrollToAnchor).offset().top')

searched the web and fiddeled around but am no success to fix it.
can you please help, thx a bunch

SSemicolon WebSTAFFFeb 11, 2020

Hello,

Thanks for reporting this to us! Please consider using the following code instead:


if( window.location.hash ) {
	window.scrollTo(0, 0);
}

jQuery(window).on('load', function(){
	var divScrollToAnchor = window.location.hash;

	if( jQuery(divScrollToAnchor).length > 0 ) {
		var t = setTimeout( function(){
			jQuery('html,body').stop(true).animate({
				'scrollTop': jQuery(divScrollToAnchor).offset().top - 80
			}, 700, 'easeOutQuad');
		}, 1000);
	}
});

This will definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SstookyFeb 11, 2020

hello semicolon

thx a lot, the errors have dissapeared from console, so far so good.
but the code seems to have some glitches.

http://ek.web.my1.cc/
user semicolon
pwd ektypo3_2020

the first 5 primary-nav links are onpage, the last one is new page.

when on new page, not homepage so to speak, and one clicks on one of the first 5 links Home up to Kontakt
I would like and expect the page to laod the home page and then scroll from very top to section automatically.
but it always kind of jumps directly near to the section and then adjusts by slight scrolling.

further more, when coming from external page back to homepage, the tabs in section price always jump to the last tab as active and not to the first tab as active.

to reproduce this try coming from
http://ek.web.my1.cc/service/studio-anfahrt.html
and the clicking in the menu on
PREISE
to go to http://ek.web.my1.cc/home.html#section-price

you will see both my problems.

it doesen't scroll from top of the home page to section price but jumps directly and scrolls just a little
the last tab of this scetion is always active no the first

rgds
guido

SstookyFeb 11, 2020

sorry I have changed a bit the logic of the navigation meanwhile

to reproduce this try coming from
http://ek.web.my1.cc/anwendungen.html
and the clicking in the menu on
PREISE
to go to http://ek.web.my1.cc/home.html#section-price

SSemicolon WebSTAFFFeb 12, 2020

Hello,

Thanks for reporting these issues. We will fix this in the Future Updates.

Update the JS Codes with the following:


$(window).on('beforeunload', function() {
	$('body').hide();
	$(window).scrollTop(0);
});

jQuery(window).on('load', function(){
	var divScrollToAnchor = window.location.hash;

	if( jQuery(divScrollToAnchor).length > 0 ) {
		var t = setTimeout( function(){
			jQuery('html,body').stop(true).animate({
				'scrollTop': jQuery(divScrollToAnchor).offset().top - 80
			}, 700, 'easeOutQuad');
		}, 1000);
	}
});

You might need to use the following code on all the Pages:


$(window).on('beforeunload', function() {
	$('body').hide();
	$(window).scrollTop(0);
});

Find the following code in the js/functions.js File inside the tabs: function() Function Block:


if( jQuery(windowHash).length > 0 ) {
	var windowHashText = windowHash.split('#'),
		tabItem = document.getElementById( windowHashText[1] );
	tabActive = jQuery( ".tab-content" ).index( tabItem );
}

and replace it with:


if( element.find(windowHash).length > 0 ) {
	var windowHashText = windowHash.split('#'),
		tabItem = document.getElementById( windowHashText[1] );
	tabActive = jQuery( ".tab-content" ).index( tabItem );
	if( tabActive < 0 ) {
		tabActive = 0;
	}
}

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SstookyFeb 12, 2020

hello semicolon

I cannot stop to mention that your support is awesome !!!

the problem of tabs-menu when coming from different page is solved, thx! now the first tab is active and not the last.

unfortunately the scrollto problem when coming from different page still persists :-(
I made a small svreenrecording to show you what I mean in case it is not clear. (behaviour on mac safari/firefox is the same)
hre is the screen recording
https://www.dropbox.com/s/orwv4e2ckktxgg5/scrollbehavior.mov?dl=0

first firefox:

0:16 I load the page freshly, no cache no cookies just as if loaded first time
0:19 is a minor, click on preise does not scroll completely to that section
0:36 go to new page
0:40 go back to homepage and scrollt to section-price
0:41 you can see the home page is loaded, but it jumps directly to the section and slightly scrolls down some pixel
I would expect to load the page and show the top of the body and then scrol down to the section

second safari:

0:55 call the page, again all data cleared
1:04 to 1:17 again you can see on first click it does not scroll completely to section-price, funny enough this happens only on first scrollto price.
afterwords you can see it scrolls propperly all sections
1:18 -1:33 go to new page here is a strange behavior that the page seems for a moment aligned completely ugly (white top and half of the slider image)
1:38 go back to homepage and scrollt to section-price
similar to firefox it directly jumps to middle of page section-service and then scrolls some pixel to section-price

so maybe I am to picky
maybe it is some settings in my browser
I don't know, but the nices solution would be

click
load home from top
scroll smoothly to desired section
align section propperly to the 80px height header

rgds and ever so much bunch of thx for your help
GUIDO

SstookyFeb 12, 2020

maybe a solution would be

click - load page - delay some ms before starting the scrolling action?
i have no idea how to solve this nicely :-(

SSemicolon WebSTAFFFeb 13, 2020

Hello,

Thank You so much for the Kind Words and your Continued Patience around this issue!

We have been working on this for a while now and the recent best solution we have come up with is this:


$(window).on('beforeunload', function() {
	$(window).scrollTop(0);
});

$(document).ready( function(){
	$(window).scrollTop(0);
});

jQuery(window).on('load', function(){
	var divScrollToAnchor = window.location.hash;

	if( jQuery(divScrollToAnchor).length > 0 ) {
		var t = setTimeout( function(){
			jQuery('html,body').stop(true).animate({
				'scrollTop': jQuery(divScrollToAnchor).offset().top - 80
			}, 700, 'easeOutQuad');
		}, 1000);
	}
});

This code appears to be working for us fine. Please check and let us know. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SstookyFeb 13, 2020

whooo, that is working nicely.
will test on more devices and in case of any questons come back to you.

and I have to thank YOU for your patience with me and the absolute fast response times and perfect fixes.

rgds
guido

SSemicolon WebSTAFFFeb 14, 2020

Hello,

Very Happy to Help! Thanks for your Patience.

Do let us know if we can help you with anything else or if you are still facing any further issues with this feature.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard