• View our reviews on Hot Scripts
  • JS Tutorial

Recent Comments

Powered by Disqus

Back to articles

Sliding effect between anchor hash link

Anchor slider class provides scrolling and sliding effects when switching between anchor hash links. It can find target by id or name attributes and slide or scroll towards target. By default target scrolls as close as possible towards 0 0 coordinates (top left corner), but it is possible to provide x and/or y offset from target element, then target will scroll as close as possible to offset coordinates

There are also callback functions for scroll start, end and each step of scrolling which is determined by interval provided in settings

User can also provide id of parent when, for example, scrollable div is used. If id is not provided, object will use window as parent element

Package contains anchor_slider.js and anchor_slider.packed.js (packed javascript)and two example files: simple_example,.html and example.html, to demonstrate class functionality.



Example codes

<a name='onthetop' href='#atthebottom'>Go to bottom</a>
<div id='atthebottom' style='position: relative; top: 1000px; height: 200px;'>
<a href='#onthetop'>Go to top</a>
<script src="./anchor_slider.packed.js" type="text/javascript"></script>
    var scroll = new anchor_slider();

Examples in action

Example scripts provided with package in action:

Method list


Back to method list

Method namenew anchor_scroll(config);
DescriptionProvide scrolling functionality for all hash links on webpage with provided settings
Input parameters

json config - Json structure with configuration properties

  • int step - step by how much pixels should scrolling move in each iteration, if used in slide effect, then it represents percentage of all path that needs to be scrolled (default: 10)
  • int interval - time in miliseconds for each scrolling iteration (default: 10)
  • bool sldie - provide sliding effect instead of simple scrolling (default: true)
  • int offsetX - x axis offset from target element, where scrolling should end if possible (default: 0)
  • int offsetY - y axis offset from target element, where scrolling should end if possible (default: 0)
  • function scrollStart - callback function when scrolling starts, provides id or name of target element as parameter (default: function(id){})
  • function scrollEnd - callback function when scrolling ends, provides id or name, x coordinate and y coordinate of target element as parameters (default: function(id, x, y){})
  • function scrollStep - callback function for each scrolling iteration, provides id or name of target element, current x scroll coordinate and current y scroll coordinate as parameters (default: function(id, x, y){})
  • bool show_hash - change hash states in url when clicking hash links (default: true)
  • string parent - id of parent element, which should be scrolled (default: uses window element)
Example input
var scroll = new anchor_slider( 
	step: 10,
	interval: 10,
	slide: true,
	offsetX: 1000,
	offsetY: 100,
	show_hash: true

Latest changes

None for now

Rate us

Like our script? Rate it at JavaScript > Hot Scripts

Try it out and Rate on


JS classes support forum or comments below

You may also be interested in:

Powered by

blog comments powered by Disqus