8

I'm using this jQuery Script to do 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 **/

It works fantastic, except for one thing, I want it to work where if someone goes directly to the url e.g. http://domain.com/page.html#anchor it smooth scrolls to that anchor from the top on page load, right now it immediately goes to the page anchor unless they've clicked on an anchor. I hope that makes sense.

Improve this question

5 Answers 5

Reset to default
26

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

While this is good, it doesn't answer the question directly. The OP wanted to smooth scroll to an id that is specifically used in the url hash: example.com/#example
5

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 **/
Improve this answer

Comments

2

@ 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

Improve this answer

Comments

0

You can do by using .scrollTop()

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

SEE HERE

Improve this answer

4 Comments

That works similar to the function in my question but it doesn't solve the problem if they navigate directly to the domain anchor (domain.com/page.html#anchor it immediately goes to the anchor if they type that into the url rather than smooth scrolling to it.
You can use animate for that
@Talon i updated my code now check it once .It is working as you required now
No not really sorry, it only activates on the click, it needs to activate on both the page load and the click.
0

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", }); }
Improve this answer

1 Comment

This is great but currently only a Working Draft. Not ready for production websites as Safari (macOS/iOS) does not yet support the smooth behavior option. See Element.scrollIntoView(). Let's hope Apple takes care of this soon.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.