# Animate scroll in the same page

**URL:** <https://community.hubspot.com/t/animate-scroll-in-the-same-page/13967>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [April 11, 2019, 7:28pm UTC](https://community.hubspot.com/t/animate-scroll-in-the-same-page/13967 "2019-04-11T19:28:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![hernanmk](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/hernanmk/32/53869_2.png) [@hernanmk](https://community.hubspot.com/u/hernanmk)\
**Post date:** [April 11, 2019, 7:28pm UTC](https://community.hubspot.com/t/animate-scroll-in-the-same-page/13967/1 "2019-04-11T19:28:04Z")

</div>

Hi!

Is there any possibility of doing a scroll animation on a link on the same page without jquery?

I use differents jquerys but none works.

The html link is simple:

Image with this link: [https://www.adbarbieri.com/productos#enlace2](https://www.adbarbieri.com/productos#enlace2)

\<a name=“enlace2”\>\</a\>

I would like click in the image and make the animation scroll!

---

<div class="post-metadata">

**Author:** ![MitchL](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mitchl/32/98942_2.png) [@MitchL](https://community.hubspot.com/u/MitchL)\
**Post date:** [April 11, 2019, 7:38pm UTC](https://community.hubspot.com/t/animate-scroll-in-the-same-page/13967/2 "2019-04-11T19:38:26Z")

</div>

Hey @hernanmk,

Here’s a smooth scrolling function I’m currently using:

```auto
 // Smooth Scrolling 
$(document).ready(function() {
$('a[href*=#]').bind('click', function(e) {
e.preventDefault();
var target = $(this).attr("href");
$('html, body').stop().animate({
scrollTop: $(target).offset().top-100
}, 500);
return false;
});
}); 

```

---

<div class="post-metadata">

**Author:** ![hernanmk](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/hernanmk/32/53869_2.png) [@hernanmk](https://community.hubspot.com/u/hernanmk)\
**Post date:** [April 11, 2019, 8:05pm UTC](https://community.hubspot.com/t/animate-scroll-in-the-same-page/13967/3 "2019-04-11T20:05:54Z")

</div>

Thanks @MitchL

Do I need to modify something or just copy it as it is and paste it at the end of my html?

---

<div class="post-metadata">

**Author:** ![MitchL](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/mitchl/32/98942_2.png) [@MitchL](https://community.hubspot.com/u/MitchL)\
**Post date:** [April 11, 2019, 8:08pm UTC](https://community.hubspot.com/t/animate-scroll-in-the-same-page/13967/4 "2019-04-11T20:08:13Z")

</div>

It should just be good to go if you paste it in!

---

<div class="post-metadata">

**Author:** ![RHamet](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/rhamet/32/29368_2.png) [@RHamet](https://community.hubspot.com/u/RHamet)\
**Post date:** [November 2, 2021, 1:52am UTC](https://community.hubspot.com/t/animate-scroll-in-the-same-page/13967/5 "2021-11-02T01:52:17Z")

</div>

I just had this hassle and concept I might percentage at least the answer that worked for me. When you go to insert the photo rather of selecting “add files” select from URL and then link the GIF you want. You can create a hyperlink to your GIF a gaggle of various approaches.

---

<div class="post-metadata">

**Author:** ![Ken\_gitahi](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ken_gitahi/32/204948_2.png) [@Ken\_gitahi](https://community.hubspot.com/u/Ken_gitahi)\
**Post date:** [January 20, 2025, 9:08am UTC](https://community.hubspot.com/t/animate-scroll-in-the-same-page/13967/6 "2025-01-20T09:08:25Z")

</div>

There is an even easier way. Go to Settings\>General\>advanced.  
Thank add this snippet to the head html section \<style\>  
\* {  
scroll-behavior: smooth;  
}  
\</style\>