jQuery Smooth Scrolling on Page Load

Question

I\'m using this jQuery Script to do Smooth Scrolling (Found on CSS-Tricks.com):

/** Smooth Scrolling Functionality **/
jQuery(document).ready(function($) {
          


        

Answer 1

I found this to be the best way to do what I want so far:

/** Smooth Scrolling Functionality **/
var jump=function(e)
{
    //alert('here');
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr("href").replace('/', '');
   }else{
       var target = location.hash;
   }

   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });

}

jQuery('html, body').hide();

jQuery(document).ready(function($)
{
    $(document).on('click', 'a[href*=#]', jump);

    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $('html, body').show();
    }
});
/** END SMOOTH SCROLLING FUNCTIONALITY **/

Answer 2

These days you can scroll on page load with only javascript. I like to set a setTimeout just to give it some time before scrolling.

if (window.location.hash) {
  var hash = window.location.hash;
  var element = document.querySelector(hash);
  
  if (element)
    element.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "start",
    });
}

Answer 3

You can do by using .scrollTop()

$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 2000);
    return false;
});

SEE HERE

Answer 4

If it is not too late for answer then here you go.... Here is a modification of PSR's code that actually works for smooth scrolling of page on load:

http://jsfiddle.net/9SDLw/1425/

$(function(){
    $('html, body').animate({
        scrollTop: $( $('#anchor1').attr('href') ).offset().top
    }, 2000);
    return false;
});

Better version:

http://jsfiddle.net/9SDLw/1432/

$(function(){
    $('html, body').animate({
        scrollTop: $('.myclass').offset().top
    }, 2000);
    return false;
});

All you need to do in this script is to replace the "myclass" with a class or ID of the control located on the page you want to scroll to.

Naveed

Answer 5

@ Talons post ...

I found this to be the best way to do what I want so far:

Me 2, but I had to make some changes to it.

var target = jQuery(this).attr("href").replace('/', '');

1. Why replace the "/"?

In my case it makes the url...

"http:// [my domain]/ [my page]/ [my anchor]" ...look like...

"http:/ [my domain]/ [my page]/ [my anchor]"

and...

2. Chrome (my current version: 40.0.2214.115 m) doesn't like the following Line...

   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });

Uncaught Error: Syntax error, unrecognized expression: http:/ [my domain]/ [my page]/ [my anchor]

I found out that jQuery cannot work with "offset" when "target" is a full href like http:// .../#anchor.

to fix 1.

replaced:

var target = jQuery(this).attr("href").replace('/', '');

with:

var target = jQuery(this).attr("href");

to fix 2.

replaced:

   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });

with:

if(target.search('/') === -1) { //only do scroll if page with anchor is the currently loaded page
   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500"easeInOutExpo"); // requires easing
}

Now works perfectly for me, without any errors. Please comment on this one, for I am pretty new in js/jquery...

thx @Talon