jQuery Smooth Scroll To ID From Another Page
In this article, I show you jQuery smooth scroll to ID from another page. If you are facing a problem with the smooth scroll to ID from another page then here you have a solution to overcome. From a single page smooth scroll you can use like this article, but from a different page to an anchor link, you can match with the location of page targeted ID.
Instead of using a target, we going to use it with the targethash (eg. about.php#mission). Based on the page loads we get the hash from the address bar and matching up target id to smooth scroll. Also code tested in Safari, Firefox, Chrome, Opera, and IE11.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
jQuery(function($) { $('a[href*="#"]:not([href="#"])').click(function() { var target = $(this.hash); $('html,body').stop().animate({ scrollTop: target.offset().top - 100 }, 1100); }); if (location.hash){ var id = $(location.hash); } $(window).load(function() { if (location.hash){ $('html,body').animate({scrollTop: id.offset().top -100}, 600) }; }); }); |
Note: Use the below jQuery CDN before using the script
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> |
Conclusion: I hope this will help you to smooth scroll to ID from different pages. If you have any problem with this topic use the comment box to let me know. If you loved this article share it with your friends.
