1. Home
  2. Knowledge Base
  3. Multiple Themes
  4. JavaScript Snippets
  5. Smooth Scroll to Anchor Links

To enable smooth scroll for linking within a page, firstly turn “Header and Footer Script output” ON in Theme Options> Theme Extensions.

Save the changes, and refresh your Theme Options.

After refreshing the page, you should see Theme Options> Header and Footer Scripts.

Then, add this script to your header file:

<script type="text/javascript">
jQuery(document).ready(function ($) {
$('body').localScroll({offset: 0});
});
</script>

Save the changes, and your anchor links should now scroll smoothly.

Please note that “offset” can be set to take into account the height of your header if it’s sticky. For example, if you have a sticky header that is 100px high you can set the offset to 100.

If you just want to target links that are in your header then you can update the javascript to this:

<script type="text/javascript">
jQuery(document).ready(function ($) {
$('.headerclass').localScroll({offset: 0});
});
</script>

Ascend premium has a built-in option for menu links that can be turned on in the theme options > menu settings.

Was this article helpful?