I was trying to use jQuery's page scroll inside some pages and could successfully make a smooth page scroll. The only problem I have now is when attempting to do that from different page. What I mean by that is if I click on a link in a page, it should load the new page and then scroll to the specific div element.
Here is the code I used to scrolling inside the page:
var jump=function(e) { //prevent the "normal" behaviour which would be a "hard" jump e.preventDefault(); //Get the target var target = $(this).attr("href"); //perform animated scrolling $('html,body').animate( { //get top-position of target-element and set it as scroll target scrollTop: $(target).offset().top //scrolldelay: 2 seconds },2000,function() { //attach the hash (#jumptarget) to the pageurl location.hash = target; }); } $(document).ready(function() { $('a[href*=#]').bind("click", jump); return false; });
I hope the idea is clear.
Thanks
Very important Note: This code I posted above works great inside the same page, but what I'm after is to click a link from one page and go to another one and then scroll to the target. I hope it is clear now. Thanks
So, if you want to scroll smoothly to that part instead, you first need to reset the scroll position to 0 and then add smooth scrolling. // direct browser to top right away if (window. location. hash) scroll(0,0); // takes care of some browsers issue setTimeout(function(){scroll(0,0);},1);
The scrollIntoView method: The scrollIntoView() is used to scroll to the specified element in the browser. Example: Using scrollIntoView() to scroll to an element.
click(function() { $('html, body'). animate({ scrollTop: $("#myDiv"). offset(). top }, 2000); });
To scroll to an element on click in React:Set a ref prop on the element you want to scroll to. Set the onClick prop on the other element. Every time the element is clicked, call the scrollIntoView() method on the ref object.
You basically need to do this:
href="other_page.html#section"
)ready
handler clear the hard jump scroll normally dictated by the hash and as soon as possible scroll the page back to the top and call jump()
- you'll need to do this asynchronouslyjump()
if no event is given, make location.hash
the targethtml,body
right away and show it back once you scrolled it back to zeroThis is your code with the above added:
var jump=function(e) { if (e){ e.preventDefault(); var target = $(this).attr("href"); }else{ var target = location.hash; } $('html,body').animate( { scrollTop: $(target).offset().top },2000,function() { location.hash = target; }); } $('html, body').hide(); $(document).ready(function() { $('a[href^=#]').bind("click", jump); if (location.hash){ setTimeout(function(){ $('html, body').scrollTop(0).show(); jump(); }, 0); }else{ $('html, body').show(); } });
Verified working in Chrome/Safari, Firefox and Opera. I don't know about IE though.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With