-3

So I have a link on page A like

<a href="mysite.com/pageB#anchor"></a>

Of course, when clicked, pageB will open with the #anchor element on the top of the screen. I want it to be a little more attractive and lively. I want pageB to firstly be open normally and then scroll to #anchor with a rather slow speed(say 0.5s). I tried to google for the answer but sometimes this kind of simple and general questions are hard to search for an answer, there are just too many matches for keywords like anchor, link, etc.. So I have to ask here, thank you for your help in advance.

Andy G
  • 19,232
  • 5
  • 47
  • 69
shenkwen
  • 3,536
  • 5
  • 45
  • 85
  • You can find your answer in this page: [jQuery scroll to ID from different page](http://stackoverflow.com/a/9805747/3252370) example: http://vostrel.cz/so/9652944/page.html – Amin Maleki Jun 27 '16 at 13:48

1 Answers1

1
$( document ).ready(function() { // On load of the page
    $('body').scrollTo('#anchor'); // Scroll Screen to Target Element
});
user3731475
  • 11
  • 1
  • You'd also have to change the href so that it's not linking directly to the anchor to begin with (e.g. by using a query parameter instead). – anotherdave Jun 11 '14 at 22:28
  • Thank you! Unfortunately I cant use jQuery like this in this situation. I have multiple links on pageA, matching same amount anchors on pageB. And the effect I want to achieve can partly be seen on this link http://demo.rockettheme.com/live/joomla/vermilion/, on the bottom right of the page, there is a back-to-top button. I wonder if this effect is achieved by CSS or not? – shenkwen Jun 11 '14 at 23:38
  • Or maybe I can use jQuery to detect the anchor in the URL and scroll accordingly? But I'm gonna need instruction regarding how to do that too. – shenkwen Jun 11 '14 at 23:48