Click to Scroll Not Working with Multiple Layouts

1

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):

Any help would be greatly appreciated, thanks!!!

2

Hello @rjmahesh,

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;
      }
    }
  });
});
3

On a site note: Nice design.

4

This worked perfectly! Thanks so much for your help, this forum is the best. Will share the finished result with you when its done.

5

Thanks! Will share the final result when its done.

6

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

Download link for Hype file:

7

two points:

  1. add a touchstartbinding to the a-tags
  2. remove the padding from the a-tags surrounding divs, make the a-tag-elements bigger so that access is easy …

tipp: you can examine the documentstructure in the browser by right-click show element

8

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:

http://www.nogreatergood.com

9

Arjun,

your mobile link to the Dribbble account is not leading to the correct page. This is its target:
https://dribbble.com/NoGG_Mag