Forums

uddinnyc94

Would anyone know how to make external links smooth scroll as well. Say this my website is http://www.cyberfanatic.com/ right and so if i post a link like so http://www.cyberfanatic.com#footer can you make it so that when the page is done loading it will smooth scroll to the footer. Basically smooth scroll to external anchor links the code i use right now to enable smooth scroll on same page links is like so


$(function() {
	 $('a[href^="#"]').click(function() {
			$('html,body').animate({scrollTop:$(this.hash).offset().top}, 200);
			return false;
	});
});

Hompimpa

I can't do that with ID, because the page will jump before finished loaded. But with classes: http://codepen.io/full/tovic/smooth-scroll-to-hash/3#footer

$(window).bind('load', function() {
    var urlHash = window.location.href.split('#')[1]; // Get hash from URL
    $('html,body').animate({scrollTop:$('footer.'+ urlHash).offset().top}, 1000);
});

http://codepen.io/pen/tovic/smooth-scroll-to-hash/3

I also use classes to smooth scrolling my blog from comment permalink's #hash to targeting the class (I change all commentID to class), not targeting the ID T_T

uddinnyc94

thing is that i don't just want this to go to the footer i want this to happen to every hash mark used as a bookmark on my website. So can you please help.

Hompimpa

Simply remove the footer:

$(window).bind('load', function() {
    var urlHash = window.location.href.split('#')[1]; // Get hash from URL
    $('html,body').animate({scrollTop:$('.'+ urlHash).offset().top}, 1000);
});

Still using class. I don't have any idea.

uddinnyc94

sorry but the code is not working i added it to my website but not working

Hompimpa

http://jsfiddle.net/tovic/kw7LD/show/#section1
http://jsfiddle.net/tovic/kw7LD/show/#section2
http://jsfiddle.net/tovic/kw7LD/show/#section3
http://jsfiddle.net/tovic/kw7LD/show/#section4
http://jsfiddle.net/tovic/kw7LD/show/#section5
...

uddinnyc94

okay quick question do i put this code inside of document ready function or do i put it outside the document ready

uddinnyc94

here is my website http://www.cyberfanatic.com/

here is my javascript file for the entire website http://www.cyberfanatic.com/js/main-all.js

its that long of a js file so should only take 1 mintue to read all the code please tell me what i am doing wrong. as when i insert your code into my website all it does is take the hash away from the url and then jump to the anchor link

uddinnyc94

recheck that i finally got the code to work but the only problem is that it only works when i put a class on the anchor link can you please alter the code so i can do it with an id instead of putting the class on an anchor tag.

What i am saying is your above code only works when the anchor link is like this


	 <a class="gohere" href="#"> HEllo </a>

Can you make it so the code works like this


	 <a href="#gohere"> Load then go here </a>

Hompimpa

Yep: http://jsfiddle.net/tovic/kw7LD/1/show/#section3

$(window).bind("load", function() {
   var urlHash = window.location.href.split("#")[1];
    $('html,body').animate({scrollTop:$('a[href="#'+urlHash+'"]').offset().top}, 4000);        
});

A little mind to the design, but it's not my ability to disagree.

uddinnyc94

see i think you are understand me wrong the code works fine but not under my circumstances. I took a look at your jsfiddle and saw that when you changed the script you also changed the section.
at first you had the class set to section1 now you have the href to section one. I don't want the href and nor do i want the class. I want something like this


	 <a id="#comehere" href="#">On page Load come to this id</a>

Any help would be much appreciated. So on page load it will to the anchor link #comehere

jaganryali

$(window).load(function(event) { if (location.hash) {$('html,body').animate({scrollTop: $(location.hash).offset().top -20}, 'slow');} } mid1

may be you got that by this time.

treehouse : what would you like to learn today?

Forums

Jquery Smooth Scroll External Anchor Link Help