Scroll to top functionality

[eweisbrot]

Hello,

I’m trying to determine how to enable the smooth scrolling that happens when a user clicks the scroll to top button on another element. I’m attempting to have the page scroll down smoothly when a user clicks the “See State Bond Requirements”.

Please help. Thanks!

---

[Support]

Hello, there’s a jQuery function for that, please try this:

$('html,body').animate({
  scrollTop: $('#map').offset().top
}, 1000);

Call that function when the button is clicked.

Thanks.

---

[eweisbrot]

Thanks for the quick response.

I added the function to the map jQuery, then added the animate class to the floating button. However, this didn’t work. Did I understand you correctly?

---

[Support]

Hello, sure, I understood, the fact is that you need to add a click event in that button:

$('#floating-button').on('click', function() {
	$('html,body').animate({
	  scrollTop: $('#map').offset().top
	}, 1000);
});

I just tried that here in the console and it worked 🙂

Thanks.

---

[eweisbrot]

Hello,

Thanks again. I tried that…but still can’t get it to work. I’m not seeing any errors in Chrome developer tools either. Any ideas?

---

[Support]

Hello, you must add that after all scripts. It’s probably not initializing in the right order.

---

[eweisbrot]

Thanks…you were right. I’m attempting to have the scroller stop at “SELECT YOUR STATE” by changing #map to #requirements, but doing so seems to disable the smooth scrolling. Do you know why this is?

---

[Support]

Hello, you need to use ID, not NAME, so:

FROM:

<a name="requirements"></a>

FROM:

<a id="requirements"></a>

Thanks.

---

[eweisbrot]

You’ve been very helpful. Thanks!

---

[Author]

Posts