Same page scroll using Hype buttons

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)

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

1 Like

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

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(){

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

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.

Hello, i opened jquery.arbitrary-anchor.js and i deleted all events in line 60, so i deleted this : $window.on(‘mousewheel DOMMouseScroll touchstart mousedown MSPointerDown’, function(ev){
// the true clears the queue
// the false disables jump-to-end
$bodhtml.stop(true, false);

Unfortunatly, i still can’t click twice on the button. It works once, do you have a solution ?
Thank you by advanced for your help :slight_smile:


As this thread is mighty old, I added a new variation on the topic. This version supports callbacks and any selector as a target. It is written as an extension and based on a teeny tiny vanilla JS library (1.9kb) called window.smoothScroll and has no other dependencies (like that bloated jQuery).

Hype Extension Code (What is an extension? Learn more about the extension project …)

* hypeDocument.scrollToSelector 1.0
* @param {String} selector
* @param {Number} duration in seconds
* @param {Function} callback function when done
* @param {HTMLElement} scroll context
* @requires window.smoothScroll
hypeDocument.scrollToSelector = function(selector, duration, callback, context) {
	var target = document.querySelector(selector);
	if (target instanceof HTMLElement){
		window.smoothScroll(target, duration*1000 , callback, context);

Hype-file for demonstration

1.0 Initial release with simple example

PS: Love the Cheshire Cat grinning Alice (in wonderland) Lieutier has going! I could say it feels somewhat familiar :nerd_face:


Thanks a lot !

1 Like