jQuery Smooth Scrolling on Page Load with Highlight

Download small jQuery script for smooth scrolling on page load when url content hash value.

This post is about performing a smooth scroll on page load with highlighting that particular element only when user coming from another website and url contain hash.
By default clicking on hash links window automatically, scroll to that element which has id value equal to hash value. This script will perform the same on page load with smooth scroll and highlighting element using background color.

To avoid the use of jQuery UI we are using CSS animation and target pseudo selector.

Download the script here

/**
 * Smooth scrolling for hash window url
 * @param {int} scrollSpeed page scroll speed in milliseconds. Default is 1000
 * @param {string} highlightColor CSS highlight color value in Hex. or pass FALSE to disable this feature. Default is #F8F99A
 * @author nick
 * @link http://www.secretsofgeeks.com
 * @returns {NULL}
 */
function scg_smooth_hash_scroll(scrollSpeed, highlightColor) {
   /* Return if jQuery not inlcuded */
   if (typeof jQuery !== "function") {
       console.warn('jQuery not found!');
       return false;
   }

   /* Default Values */
   scrollSpeed = (typeof scrollSpeed === "undefined") ? 1000 : scrollSpeed;
   highlightColor = (typeof highlightColor === "undefined") ? "#F8F99A" : highlightColor;

   var hash_value = window.location.hash;

   if (hash_value) {
       /* Prevent Default scrolling */
       setTimeout(function (){
           window.scrollTo(0, 0); 
       }, 1);

       /* Append head to add highlight css */
       if (highlightColor) {                           
           jQuery(document).ready(function (){
               var scg_css = '*.scg-highlight-target:target { animation: scg_highlight 1.5s; -moz-animation: scg_highlight 1.5s; -webkit-animation: scg_highlight 1.5s; } '+
                             '@keyframes scg_highlight { 50% {background: '+highlightColor+';} } '+
                             '@-moz-keyframes scg_highlight { 50% {background: '+highlightColor+';} } '+
                             '@-webkit-keyframes scg_highlight { 50% {background: '+highlightColor+';} }';
               jQuery("<style type="text/css"> " + scg_css + " </style>").appendTo("head");
           });
       }
   }

   jQuery(window).load(function (){
       /* Scroll to position and add class for css animation */
       if (jQuery(hash_value).length > 0) {
           scg_element_obj = jQuery(hash_value);
           window.scroll(0, 0); /* Prevent Default scrolling for chrome and opera */
           jQuery('html, body').animate( {scrollTop: scg_element_obj.offset().top}, scrollSpeed, function (){
               scg_element_obj.addClass('scg-highlight-target');
           });
       }
   });
}

/* uses 
 * Note: keep that function outside the load and ready function of jquery or js
 */
scg_smooth_hash_scroll();

Uses:

• Download this script and include in your web page or copy paste whole script in your script file.
• scg_smooth_hash_scroll(scrollSpeed, highlightColor) accept two parameters.
• Argument 1 scrollSpeed: Define scrolling speed in milliseconds. Default is 1000ms
• Argument 2 highlightColor: Define the highlight color for element in HEX or color string e.g. #FF0000 or Red. Default is #F8F99A or pass false to disable this functionality.
• Note: call the function outside the ready or load function of jQuery.