JQuery Smooth scrolling on page load

Question

I use this jQuery Script to perform smooth scrolling (Found on CSS-Tricks.com):

/** Smooth Scrolling Functionality **/ jQuery(document).ready(function($) { function filterPath(string) { return string .replace(/^\//,'') .replace(/(index|default).[a-zA-Z]{3,4}$/,'') .replace(/\/$/,''); } var locationPath = filterPath(location.pathname); var scrollElem = scrollableElement('html', 'body'); var urlHash = '#' + window.location.href.split("#")[1]; $('a[href*=#]').each(function() { $(this).click(function(event) { var thisPath = filterPath(this.pathname) || locationPath; if ( locationPath == thisPath && (location.hostname == this.hostname || !this.hostname) && this.hash.replace(/#/,'') ) { var $target = $(this.hash), target = this.hash; if (target) { var targetOffset = $target.offset().top; event.preventDefault(); $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { location.hash = target; }); } } }); }); // use the first element that is "scrollable" function scrollableElement(els) { for (var i = 0, argLength = arguments.length; i <argLength; i++) { var el = arguments[i], $scrollElement = $(el); if ($scrollElement.scrollTop()> 0) { return el; } else { $scrollElement.scrollTop(1); var isScrollable = $scrollElement.scrollTop()> 0; $scrollElement.scrollTop(0); if (isScrollable) { return el; } } } return []; } }); /** END SMOOTH SCROLLING FUNCTIONALITY **/ 

This works fantastic, except for one, I want it to work where, if someone goes directly to the URL, for example. http://domain.com/page.html#anchor it smoothly scrolls this anchor on top of the page load, right now it immediately goes to the page anchor, unless they click on the anchor. Hope this makes sense.

Answer 1

If it’s not too late for an answer, then you go .... Here is a modification of the PSR code, which actually works to smoothly scroll the page upon loading:

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

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

The best version:

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

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

All you have to do in this script is to replace "myclass" with the class or control identifier located on the page you want to scroll through.

By the look

Answer 2

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

 /** 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 3

@ Coupon message ...

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

Me 2, but I had to make some changes.

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

1. Why replace "/"?

In my case, this does 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) does not like the next line ...

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

Unprepared 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.

replace:

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

from:

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

to fix 2.

replaced by:

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

from:

 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 great for me, no errors. Comment on this because I'm pretty new to js / jquery ...

thanks @Talon

Answer 4

You can use .scrollTop ()

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

SEE HERE