Same page scroll using Hype buttons


(ioserg) #1

Hi, I can do the page scroll using a little bit of code + text, but I can’t seem to make it work using Hype’s buttons.
When I use buttons, I can jump to the place I want, but not with a scroll effect.

Is there a way to make my buttons work?



I recommend starting with this document (I’ve adapted slightly) (59.1 KB)

(ioserg) #3

That’s exactly what I was looking for.
Thanks a lot Daniel :grinning:

(Nim) #4

i dont know why it works once…Second click doesn’t scroll no more…

(ioserg) #5

That happened to me too, but only with the single button. The 3 buttons on the top of the page work perfectly.
I just deleted the single button and kept working with the top 3.


None of them work for me if clicked twice in a row…

So using one of the three grouped buttons as an example - say the center one (02). Click once and it scrolls down to “Target 2”. Now manually scroll back to the top using the scroll bar on the right side of the window. Click (02) again - nothing happens - at least for me.

Ditto all the other buttons. Click on one of them then manually scroll back to the top. Click the same button again - no scrolling. Click another one and everything is fine.

In the actual operation of the page (i.e. not considering the “Smoothly cruise to Target 3” button) when the same button is hit twice in a row it does not show up as a problem because the page has already scrolled to that point. Clicking another button seems to “reset” the previous button’s functional operation.

EDIT: A little more research… the “hashchange” event is not triggered when the same button is clicked in succession (or so it appears to me)

From the “jquery.arbitrary-anchor.js” script:

 // only scroll to element if href is equal 
  // to hash; we'll let hashchange event 
  // handle everything else
  if ( href === location.hash )
    scrollToHash( href )

// Scroll to the object when hashchange event
// is triggered on the window.
$window.on('hashchange', function(){

(Hans-Gerd Claßen) #7

the jQuery-Plugin has got a function to listen for user interacts with page during scroll to cancel the scroll …

quick’n dirty: open the js, delete all events in line 60

(Connor London) #8

Hi thanks for this smooth scrolling template. I’m curious how you got the ‘Gruppe’ (with the 1,2, and 3 buttons that click to the targets) to remain on top of the viewpoint even as the user scrolls?


In the “Head HTML” there is the following script:

  position : fixed !important;

So an element (“Gruppe” in this case) with its class name set to “sticky” will be fixed in place.