0

I have a Wordpress website and have a navigation link which links to an anchored point at the bottom/footer of my page.

It links to #footer-anchor

HTML

<div id="footer-anchor"> ... </div>

It links properly, but I want the page to animate to the anchor point, right now it just 'pops' to the anchor point.

EDIT: I am using Wordpress, so I can't hardcode the button in the html (I don't think I can anyway)

user3550879
  • 3,125
  • 5
  • 26
  • 48

1 Answers1

0

You can use scrollTop property.

$("#anchor").click(function() {
    $("html, body").animate({ scrollTop: $("#footer-anchor").scrollTop() }, 1000);
}
Samir
  • 6,268
  • 2
  • 9
  • 30
  • put into the tags? – user3550879 Aug 09 '15 at 06:55
  • I am using Wordpress, so I don't have specific control on the button itself. All I can do in the link the url to #footer-anchor in the admin side (menu panel) – user3550879 Aug 09 '15 at 06:59
  • You will have to customize it a bit. Replace `#footer-anchor` in href with `javascript:;`. Assign an `id` to anchor and add the code snippet in js file. – Samir Aug 09 '15 at 07:03
  • i'm confused as to what you mean in your comment. I have an #id on the div called #footer-anchor. and in the menu admin panel it says URL: #footer-anchor instead of a www link – user3550879 Aug 09 '15 at 20:55