Animate Between Hype Scenes

@Ollie @Ed_Sager

Note: The term "named anchor" is actually a throwback to HTML4 when the "< a >" tag could either be a hyperlink or an "anchor" on a web page. In HTML5 there are now only "hyperlinks". Also in HTML4 You could use the "name" attribute, but now only the "id" attribute is supported in HTML5.

So with this in mind...

A "named anchor" I think is best illustrated by an example:

<body>

<h2 id="top">Top of page!</h2>

<p>In no time at all Hype 4 will be released.</p>

<a href="#top">Go to top</a>

</body>

Inside the opening "h2" tag we see id="top". In the opening anchor tag near the bottom of the HTML markup is written < a href="#top">. Clicking on this link instantly (no scroll) places the "h2" element's page location at the top of the page (if the spacing on the viewport~page length permits).

This is an extremely short "body" length designed to illustrate the principle, of course one would typically use this type of arrangement with much longer pages.


A demo - created by @MarkHunte - effectively demonstrates this basic operation in an elegant bit of code - differently executed than the example above but with the same ultimate result:
smoothscrollingEdge2HypeDRAFT2_MH1.hype 2.zip (28.4 KB)

The function running things is called "smoothscroller". Note: Mark uses "classes" and he uses jQuery (loaded in the "Head HTML").

The jQuery utilizes a script featuring "animate" (part of jQuery's lexicon) in the "smoothscroller" code, which - as implied in the function name - allows the page to smoothly scroll to the appropriate element.

Original thread:

4 Likes