scrollto data-offset depending on screen size

hello semicolon

the data-offset="XXX" is set in the html code normally.
is there a way to have different offsets depending on screen sizes?

thx and rgds
guido

I know that there is the mobile nav option and read here in forum, that this can be used to set different offsets.

but I am talking about e.g. buttons within a page that load a new page and should scroll to a dedicated id.
and then depending if I am on a mobile version or not, I do have a header or not.
so one time is shall scroll to 0 offset one time to the header height offset, like 120 in my case.

thx and rgds,
guido

hello semicolon

thx for your effort to fix this !!!
really appreciate the way you support your product.

I changed the code as suggested and made loads of tests, unforunately it does not work for me.

if I interpret this code part correctly

		if( !divScrollOffsetXl ) { divScrollOffsetXl = Number(divScrollOffset); }
		if( !divScrollOffsetLg ) { divScrollOffsetLg = Number(divScrollOffsetXl); }
		if( !divScrollOffsetMd ) { divScrollOffsetMd = Number(divScrollOffsetLg); }
		if( !divScrollOffsetSm ) { divScrollOffsetSm = Number(divScrollOffsetMd); }
		if( !divScrollOffsetXs ) { divScrollOffsetXs = Number(divScrollOffsetSm); }

there is a kind of fallback implemented, so that a link as such
<li><a href="#"><div>Über Uns</div></a></li>
should work for XS and SM scrolling to absolute top (0px)
and MD and all sizes above should scroll to top with 80px offset
correct?
but it seems to always take the 0px no matter what screen/device size

the I thought, ok lets use them all this way
data-offset-xs="0" data-offset-sm="0" data-offset-md="80" data-offset-lg="80" data-offset-xl="80"
and also reversed order starting with XL and XS last
same, it always scrolls to the first in line value for devices and sizes

even adding the "wildcard" option data-offset="80" at beginning or end, normal from small to big order or reversed big to small
always the same behavior, first in line hits for all sizes.

could you please have a look into my code if I did wrong somwehwere?

thx and rgds,
guido

hello semicolon

thx for your effort to fix this !!!
really appreciate the way you support your product.

I changed the code as suggested and made loads of tests, unforunately it does not work for me.

if I interpret this code part correctly

		if( !divScrollOffsetXl ) { divScrollOffsetXl = Number(divScrollOffset); }
		if( !divScrollOffsetLg ) { divScrollOffsetLg = Number(divScrollOffsetXl); }
		if( !divScrollOffsetMd ) { divScrollOffsetMd = Number(divScrollOffsetLg); }
		if( !divScrollOffsetSm ) { divScrollOffsetSm = Number(divScrollOffsetMd); }
		if( !divScrollOffsetXs ) { divScrollOffsetXs = Number(divScrollOffsetSm); }

there is a kind of fallback implemented, so that a link as such
'<li><a href="#"><div>Über Uns</div></a></li>'
should work for XS and SM scrolling to absolute top (0px)
and MD and all sizes above should scroll to top with 80px offset
correct?
but it seems to always take the 0px no matter what screen/device size

the I thought, ok lets use them all this way
data-offset-xs="0" data-offset-sm="0" data-offset-md="80" data-offset-lg="80" data-offset-xl="80"
and also reversed order starting with XL and XS last
same, it always scrolls to the first in line value for devices and sizes

even adding the "wildcard" option data-offset="80" at beginning or end, normal from small to big order or reversed big to small
always the same behavior, first in line hits for all sizes.

could you please have a look into my code if I did wrong somwehwere?

thx and rgds,
guido

sorry my code post the forum layout? here a trial to fix that

hello semicolon

thx for your effort to fix this !!!
really appreciate the way you support your product.

I changed the code as suggested and made loads of tests, unforunately it does not work for me.

if I interpret this code part correctly

		if( !divScrollOffsetXl ) { divScrollOffsetXl = Number(divScrollOffset); }
		if( !divScrollOffsetLg ) { divScrollOffsetLg = Number(divScrollOffsetXl); }
		if( !divScrollOffsetMd ) { divScrollOffsetMd = Number(divScrollOffsetLg); }
		if( !divScrollOffsetSm ) { divScrollOffsetSm = Number(divScrollOffsetMd); }
		if( !divScrollOffsetXs ) { divScrollOffsetXs = Number(divScrollOffsetSm); }

there is a kind of fallback implemented, so that a link as such
`

• Über Uns`
  should work for XS and SM scrolling to absolute top (0px)
  and MD and all sizes above should scroll to top with 80px offset
  correct?
  but it seems to always take the 0px no matter what screen/device size

the I thought, ok lets use them all this way
data-offset-xs=”0″ data-offset-sm=”0″ data-offset-md=”80″ data-offset-lg=”80″ data-offset-xl=”80″
and also reversed order starting with XL and XS last
same, it always scrolls to the first in line value for devices and sizes

even adding the “wildcard” option data-offset=”80″ at beginning or end, normal from small to big order or reversed big to small
always the same behavior, first in line hits for all sizes.

could you please have a look into my code if I did wrong somwehwere?

thx and rgds,
guido

you can still

try to reproduce the scrollto on

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

omg stupid me

the code you provided is not for the main navigation but for links withn the website, right?

for the main nav there is the
.mobile-primary-menu
so I could set a second nav as in documentation where one nav has 80px offset for big screens, and when mobile navigation is taking action there is a second nav with class .mobile-primary-menu and offset 0px and that works perfect.

so now I will test your code for links within the page not the nav and see if that works.
sorry to bother, will go on testing and come back here with the e results.

and could you please delete the last posts, so it does not break the forum layout?

thx and rgds,
guido

hello semicolon

I have tested the code, and I think I didn't explain excatly where my problem is.

I am looking for a solution to influence the data-offset of an anchor to a pagesection of a different than the actual page and respect different offsets depending on the screen/device size.
to make it clear I have made a very short screen recording, wich can be found here:

https://www.dropbox.com/s/znrczq18bg164jl/data-scrollto-offset-for-external-links.mov?dl=0

once again sorry for breaking the forum layout with the code on my previous posts and thx ever so much for your patience with me and for your support.

rgds,
guido

I guess I found the problems root but not the solution.

in my first ticket you suggested in this thread some JS code for the footer
http://support.semicolonweb.com/forums/topic/scroll-to-element-on-new-page/

and this seems to conflict with the device data offsets and generally with data-offsets
maybe that's the issue, maybe it helps you debugging the wwhole scrollto.

e.g. speaking atm. just for the desktop screen sizes:
even though the header is only a 80px I need to put - 120 in the footer script to achieve the correct position
120 is the height of the header before it minimizes the size when the page is not in position top
and then it does not matter at all what data-offset I put in any link, it always takes this value

so far my experience after heavy testing.
IMHO the footer script is the "badboy" here?!

but taking it out again is now option. because when taking it out the feature that

• the age first loads
  . pauses couple of milliseconds
• than starts to scroll nicely to the position it should go to

so maybe there should be a way to make the footer scripts read an respect the cariable data-offsets (xs-xl) that come from the original link?

rgds,
guido

ok after more extend test with alering the code in any possble way I could think of I think that the extra code you suggested is really conflicting with the data-offset

	
			$(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 - 120
						}, 2000, 'easeOutQuad');
					}, 1500);
				}
			});
	

this is what I got in footer for smooth page scroll comin from external page as you suggested
and therefor any data-offset I put in the link on the referring page has no effect at all.

maybe that helps you.
I guess the code above has to be ingetrated somehow in the function.js and obey the data-offsets
best case would be that it obeys the data-offsets like for links within the same page, so I can set data-offser-XXX where XXX is xs/sm/md/lg/xl

hope to have explained well now what my problem is

thx and rgds,
guido

hello semicolon

I have changed the code in functions.js, but that breaks the whole meinnnav with the following errorcode
(see attachment)

credentials for testing are still the same , please see above and test on page /home.html

rgds,
guido

hi semicolon

I was able to get rid of the error by changeing the first part in the function from

	if( $onePageMenuEl.length > 0 ){
		var onePageSpeed = $onePageMenuEl.attr('data-speed'),
			onePageOffset = $onePageMenuEl.attr('data-offset'),
			onePageOffsetXl = element.attr('data-offset-xl'),
			onePageOffsetLg = element.attr('data-offset-lg'),
			onePageOffsetMd = element.attr('data-offset-md'),
			onePageOffsetSm = element.attr('data-offset-sm'),
			onePageOffsetXs = element.attr('data-offset-xs'),
			onePageEasing = $onePageMenuEl.attr('data-easing'); 

to

	if( $onePageMenuEl.length > 0 ){
		var onePageSpeed = $onePageMenuEl.attr('data-speed'),
			onePageOffset = $onePageMenuEl.attr('data-offset'),
			onePageEasing = $onePageMenuEl.attr('data-easing');

but that still does not fix the problem unfortunately

I don't know how to explain it better than described in this screenrecording
https://www.dropbox.com/s/znrczq18bg164jl/data-scrollto-offset-for-external-links.mov?dl=0

let me try it in words one mor as best as I can.

**I want to place a link on page /home.html that leads to page /anwendungen.html and scrolls to the section ##treat-bbglow
the page /anwendungen.html has on larger screens than 768px a normal primary nav that is sticky and therefor an offset of 80px
on screens <= 768px the nav changes to non sticky, but the submenu nav is sticky and therefore I need an offset of 44px

so we talk about linking from /home.html to page anwenundungen.html section #treat-bbglow **

the code you provided takes action on the attribute data-href, right?!
but how do I build the link then?

to link from one page to a section on a different page my link looks like e.g. like this:
BB-Glow / Meso-Therapie

I tried it like this to test if the offest changes on smalles device compared to all other devices
BB-Glow / Meso-Therapie
and like this
BB-Glow / Meso-Therapie

but it does not work.

as mentioned before I think the problem is, that all pages react on this code in the footer of all pages

	
			$(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 - 120
						}, 2000, 'easeOutQuad');
					}, 1500);
				}
			});
	

you provided this code for a smooth scroll linking from page A to a section on page B
and the line

'scrollTop': jQuery(divScrollToAnchor).offset().top - 120

has hard-coded/set an offset of 120px in the example.

and this code IMHO needs to be integrated in the functions.js IMHO
so that the value 120 is dynamic and respects the data-offse-xs to data-offset-lg values?!

very sorry to be such a pest :-(

to some it up ...
I am still looking for a solution to link from page A to a section on page B respecting the different screen size offsets of page B and therefor scroll to the desired section an line it up propperly.

I don't know how to explain it better than as show in the video and written here.

thx and rgds,
guido

arghh I really have problems formatting the code proppely, sorry

this part of the post

to link from one page to a section on a different page my link looks like e.g. like this:
BB-Glow / Meso-Therapie

I tried it like this to test if the offest changes on smalles device compared to all other devices
BB-Glow / Meso-Therapie
and like this
BB-Glow / Meso-Therapie

should be

to link from one page to a section on a different page my link looks like e.g. like this:
[BB-Glow / Meso-Therapie](/anwendungen.html#treat-bbglow)

I tried it like this to test if the offest changes on smalles device compared to all other devices
[BB-Glow / Meso-Therapie](/anwendungen.html#treat-bbglow)
and like this
[BB-Glow / Meso-Therapie](#treat-bbglow)

hello semicolon

meanwhile the page has been set live and online so I can post the url public and not privat.
let me thank you once again for the great template and your awesome sumpport.

the site is https://elflein-kosmetik.de
just a couple of pages, as it is in general a one-pager with some extras e.g. contact, imprint, EU privacy policy.
the two main sites are the home page https://elflein-kosmetik.de/home.html and the price list of the treatments https://elflein-kosmetik.de/anwendungen.html

ok my problem ... and this is the last little glitch IMHO ... the scrolling data-offset when linking from one page to a section of the other page.

without scrolling I would build a link like this
BB-Glow / Meso-Therapie
e.g. linking from the /home.html page to the deicated treatment on /anwendungen.html namely ##treat-bbglow

to nicely first load the page and than start the scrolling you provided this snippet of js-code:

	
			$(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 - 120
						}, 2000, 'easeOutQuad');
					}, 1500);
				}
			});
	 

that works, but confuses me on the other hand.
the large header has 120px the offset should be 80px due to the header getting smaller when scrolling. but I have to set the value to 120px to scroll to 80px?
strange enough, but ok that works.

the problem is now, that canvas is responsive.
lets take a look at smaller mobile screens on https://elflein-kosmetik.de/anwendungen.html
here the header is not sticky, but the submenu is (which on the other hand is indifferent for the moment).

so on large screens the offset should be 80px and on smaller screens it should be 0px or with sticky submenu 44px.

of cause due to the js-code above and the hard coded 120px at the end of the line
'scrollTop': jQuery(divScrollToAnchor).offset().top - 120
on smaller screens the scroll has always this kind of hard coded 120px offset.

then you provided two nice snippets (see posts in this thread to alter the functions.js) namely

linkScroll: function()
onePageScroll: function()

but both of cause have only impact when scrolling within the actual page, and not linking from one page to a section of another page.

so IMHO the problem is the the line
'scrollTop': jQuery(divScrollToAnchor).offset().top - 120

this value of 120 should be dynamic in some way to respect a value of the the referring link depending on the screensize.

a.t.m. I have left it to value 120 and therefor on big screens the scrolling goes exactly to the desired offset
and on smaller screens at least it scrolls to near the the desired section or namely 76px more than desired in my case, as it scrolls to 120px instead of 44px.

once again I referr to this short screen recording
https://www.dropbox.com/s/znrczq18bg164jl/data-scrollto-offset-for-external-links.mov?dl=0
which IMHO states the problem very clear, or at least as best as I can descrbive and show it.

any solution for this very tricky problem would be very nice.

so I have questions:

a) how could that be achieved to make the 120px variable on screen size
b) if you could solve this, could you than as well provide an example of how the referring link should be build as I am getting confused with href / data-href / data-srollto

thx and rgds
guido

oh and one more thingy

the only way I could think of is 2 different js-codes in the footer

one for the page https://elflein-kosmetik.de/anwendungen.html as here we have either
big screens with the above mentioned 120px offset
mobile screens where the submenu is sticky with 44px offset

and for all other pages
big screens 120px offset
mobile screens 0px offset

no problem to integrate 2 different scripts depending on which page anwendungen.html or all others.
but than again this script should check what screensize we are on, mobile or not

so the script in last post should have in my case a condition like

if screenwidth (inner of cause) <=768px
then
'scrollTop': jQuery(divScrollToAnchor).offset().top - 44
end-then
else
'scrollTop': jQuery(divScrollToAnchor).offset().top - 120
end-else
end-if

is sth similiar possible? that would solve maybe my problem as I would than include in footer the appropriate script on per page basis

rgds
guido

strike ... finally it works

as mentioned I am using the cms typo3 wich uses the fliud template engine.
so I can conditionally set code based on page id
the page with the pricelist and sticky submenu has id 10
plus I found js code do check the screenwidth

so I implemented to different values of the offset like this

	
			$(window).on('beforeunload', function() {
				$(window).scrollTop(0);
			});
			
			$(document).ready( function(){
				$(window).scrollTop(0);
				
			});
			
			jQuery(window).on('load', function(){

	
						
				if (window.innerWidth 
						
				if (window.innerWidth 
							
				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 - myOffset
						}, 2000, 'easeOutQuad');
					}, 1500);
				}
			});
	

if you have better code for the part where I check the innerwidth of the window, et me know please
at least it works like this :-)

yeehaaaah now my wife is happy

rgds
guido

I have to thank you for me beeing so nerving
but ya know, we germans are know for ... if we do sth we try to do it right and best

hello semicolon team

canvas 6 and again the same question
2 replys before you wrote

We have been testing some codes and are planning to release this Feature completely integrated into Canvas along with External Links integration and Link based Offsets completely synced with each other. This feature will be available with Canvas 6 and no additional code embeds would be required making it much more reliable. We welcome your suggestions.

I used the search field of documentation but did not get any resulsts, than I searched manually though the docu, but am not sure if I oversaw this.

has the data-offset-on-mobiles found a way into cnavas 6?

rgds
guido

hi semicolon

that sounds great but does not seem to work for me :-(
not sure if I am getting it right. I tried different variations.

according the the know logic on how to use -xs to -xxl appendinx to e.g. classes I tried

data-offset="0" data-offset-lg="60"

and was expecting a general offset 0px for all sizes smaller than 992 and from 992 and bigger the offset of 60px.

what is the logic behind it?
must I always use all variations?

rgds
guido

I now tried them all, -xs to -xl and inverted order, does not work for me unfortunately
only data-offset without appendix seems to work and then of cause for all devices
then I tried the data-offset leading or trailling the order of all and all inverted, nothing, only data-offset works for me
sur must be doing sth wrong

rgds
guido

unfortunately still nor working for me
please find the explanation, screencast, original sources
here => http://support.semicolonweb.com/forums/topic/data-animations/#post-23641

rgds
guido