I have a hype file with a JS script that allows the file to jump down to a lower point in the page when clicking links in the header navigation. However, this click to scroll functionality only works in 1 out of the 3 layouts.
In this case, the click to scroll is only working in the mobile layout. I am having the script file reload on every layout load, so not sure how to fix this. Download the hype file below (25mb):
every layout belongs to one html document. you are trying to scroll to an element with a certain id, but an id within a html document has to be unique. so this is not possible. use instead a class for your targets … the changed code to get this to work:
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var targetClass = (this.hash).replace(/#/, '.');//get class of target
var target = $('.HYPE_scene[style*="block"]').find(targetClass);//get collection of class within currScene
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Hi h_classen, I am testing this on my mobile device (with Safari and Chrome on Iphone 6) and finding that the click to scroll functionality is only working sporadically. When I test it on a narrow computer browser it works fine. Not sure what the issue is here
Ended up turning the mobile version into a simple scroll site. Really happy with the results overall! Will be continuing to develop this as I get better with Hype. The final product: