Smooth Scrolling Stack

Smooth Scrolling Stack will scroll you to a specific position on your page. Simply set up if it should scroll to the top, to the bottom or a custom position. Custom positions can for example be IDs of specific DOM elements.
Stacks Image 3524

Screenshots

Examples

Example I: Scroll to the bottom with out-bounce-easing
This is a DIV with a unique id which can be used to jump to
I simply added this line of HTML code:
<div id="my_target">This is a DIV with a unique id which can be used to jump to</div>
Example II: Scroll to the top with In-Out-Quart-easing
Example III: Scroll to my special target with an ID and swing-easing

Settings

    Axis: Choose which axis should be used for scrolling (x and y, only x or only y)
    Scroll to: "Start", "Half way", "Max" or a custom target (custom targets are IDs of DOM elements)
    Duration: time in ms which it will take to complete the scrolling process
    Easing Function: You can choose an easing function which will be used to animate the scrolling. Find out more infos about easing functions here.

Custom Target Explanation

A custom target is a DOM element. The easiest way to identify such an element is by ID. For example you can create a HTML Stack and enter the following code:
<a id="my_custom_target">Jump to this position</a>
All you have to enter into the custom target field is #my_custom_target

Browser Compatibility

  • Safari
  • Chrome
  • Opera
  • Internet Explorer
  • Firefox

Buy

* 19% VAT will be added for EU customers

Downloads

Stacks Image 4561

Download Project File

Stacks Image 29898

Download Snippet File

Infos and Requirements

Rapidweaver
Rapidweaver 5
Stacks 2 only
Stacks 2.1.8
Responsive
Compatible to
responsive themes