Gentle Anchors

Description

Gentle Anchors is a page scrolling script for anchor tags as well as area tags on a page. It will intercept the link event and scroll you to the desired spot on the page. This has the added benefit that it's a gradual change so the visitor isn't 'popped' somewhere else on the page, which can be disorienting for visitors. This script alleviates this. It also highlights the destination item when finished scrolling to emphasize the item has been reached. This is especially helpful for links that take you to the bottom of the page, and the destination can't come to the top of the browser viewport. As the scrolling approaches its destination it will slow down as it comes to a stop rather than being a sudden stop. This adds a nice visual touch for the effect.

The script was done to be unobtrusive and degrades nicely. This means you don't need to edit your HTML code except adding the script, and if a visitor doesn't have JavaScript enabled, the links will still work as expected without JavaScript. Also, unlike other scrolling scripts like this, the behavior of the back button has been preserved. So, when a person has scrolled to a place on the page using this script, then hit the back button, they will actually go to where they were at. Other scripts either didn't have any functionality for the back button, or the page didn't scroll anywhere when it was hit. There was one downside to keeping the back button functionality though, there's a small page flicker when you click the link before it starts scrolling. How noticeable the flicker is depends on the speed of your machine and what browser you use. With Safari I can't really notice the flicker, but with Firefox I can notice it a little more. Though with the scrolling right after the flicker the visitor shouldn't be too bothered by this. I considered this side-effect to be worth it in order to retain functionality on the back button.

Example

The page navigation links at this top of the page should work as an example here. You can also try this back to top link to see it works going up as well as down. I've also placed a few more of these links around the page that you can try out.

Download

License

This work is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License http://creativecommons.org/licenses/by-sa/3.0/us/. Essentially, you can use this script for free, make changes to it as need be, share it with others, but must also not claim it as your own.

Files

back to top

Installation

Installation is pretty trivial. All you need to do is add the script to a page that you want it applied to. It will find the links on its own as long as you link using the id attribute and not the name attribute. The name attribute has been deprecated for anchors tags as well as some other tags so that is why I'm not supporting it.

<script type="text/javascript" src="gentle_anchors_1.1.js"></script>

User Settings

There are a few things that can be customized on this script and I've placed all of those settings near the top of the script. Below is the default settings, which is what I'm using on this page. The first preference is the scroll speed. I've come up with an arbitrary range. The script won't stop you from exceeding the range, but note I recommend these values for a reason. So the range is from 3, which is the fastest, to 40, which is the slowest. The actually scroll speed may vary a little from browser to browser. It's not something I can completely control. Also, the perceived scroll speed varies depending on how far away the destination is from the link. This keeps visitors from having to wait too long to reach a destination on long pages. The next preference is shine. This is a boolean variable so can be either true or false. Shine is the visual effect for the destination. When the scrolling completes it will change the background color and an outline will be applied to highlight the point being linked to. By default it is on.

The next two settings deal with the appearance of the shine effect. The shineColor is the background color that will be applied, and shineOutline is the color of the outline that will be applied (Note: IE does not support the outline effect). The color can be defined in any CSS appropriate defining. This consists of a 3/6-digit hex value (e.g., #fff, #3e3e3e), or the RGB method (e.g., rgb(255,255,255)). You can also use certain color names such as green, black, etc. If you do not want either the background color or the outline color applied you can use transparent as the color and that should supply the necessary effect.

  //#### Script preferences ####
  //   Recommended Speed Range: 3 to 40 (fast to slow) default value 15
  var scrollSpeed  = 15;     // Controls speed of scroll:
  var shine        = true;   // Whether to use shine ffect
  var shineColor   = '#dd9'; // Background color for shine
  var shineOutline = '#5f5'; // Outline color for shine; transparent for off
  //#### End script preferences ####

back to top

Compatibility

Tested on:

Version History

back to top