Servage Magazine

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(){
  this.target = "_blank";
});