Scroll smoothly to the bottom of the page

Using JavaScript with Hype
6

A few ways to do this.

Super super minimalist Smooth Scrolling for the HTML page:

Add this to the head of your document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on 'Edit HTML Head' in the Document Inspector.

html { scroll-behavior: smooth; }

Super Minimalist Smooth Scroller:

The super simple method is to animate to an anchor using plain Jquery:

Add this to the head of your document:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.3.min.js"></script> 

$('html,body').animate({
scrollTop: $("#Bottom").offset().top
}, 800);

Here's this simple reduced example:

scroll-smoothly-jquery.zip (31.0 KB)

Handle all Anchor Links and smoothly scroll to them:

Another approach (better for adapting to a larger document with anchor links already setup) is to intercept any click to anchors and use only smooth scrolling:

First, add jQuery to the head of your document, and run this function 'On Scene Load' whenever you want to have smooth scrolling on a scene:

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

Set the Unique Element ID of an element to be something like bottom by selecting it and editing that field in the Identity Inspector. You can now link to it using the following format from the inner HTML of an element:

<a href="#bottom">Jump to the bottom element</a>

Here is an example:

smoothscrolling.zip (26.2 KB)

This technique was adapted from this article: https://css-tricks.com/snippets/jquery/smooth-scrolling/

9 Likes