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 elements.

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 >
  • This is the default HTML.
  • You can replace it with your own.
  • Include your own code without the HTML, Head, or Body tags.
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

    Method:
      Click and Scroll:
      You will need to click on the Stack in order to start the scrolling
      Auto Scroll:
      This option will start to scroll your page automatically after the page has been loaded
    Start after: If you have chosen Autp Scroll then you are able to set up a timeout in ms after which the scrolling will start
    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

Downloads

Smooth Scrolling Link Snippet

Use this snippet to activate a scrolling from a text link

Infos and Requirements

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

Browser Compatibility

  • Safari
  • Chrome
  • Opera
  • Internet Explorer
  • Firefox