Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Smooth scrolling to anchor and automated link-target

Monday, March 12th, 2012 by Servage

The following two code snippets can improve your links in a simple but powerful way.

Smooth scrolling to link anchor on page

Using anchor links is a good way to create an overview at the top of a large page, while having lots of content further down. It’s also great foor cross-linking in content on large pages. Adding a smooth scrolling effect to anchors adds a great touch, and just makes the browsing experience even better. Chech out this snippet:

$(document).ready(function() {
  $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
  return false;

Open links in new window by css class

You can open links in new windows by adding the target=”_blank” attribute. However, many websites use css styling for link to indicate their destination. I.e. different css classes for internal and external links. This could be used to add the new window handling instead of using the target attribute. Check out this snippet:

$('a[@rel$='external']').click(function(){ = "_blank";
Smooth scrolling to anchor and automated link-target, 3.8 out of 5 based on 4 ratings
Categories: Tips & Tricks


You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.