Here’s how to create scroll to any element on the page in your website. If you’re using WordPress or a static HTML, you don’t need to use a plugin. It’s very simple:

Just create a custom.js file in your website and paste the code below, this code will check if the href attibute of the anchor start with a sharp sign(#) and scroll the page to the target element

[php]
<script>
jQuery(function($) {
$(‘a[href*=#]:not([href=#])’).click(function() {
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
$(‘html,body’).animate({
scrollTop: target.offset().top
}, 500);
return false;
}
}
});
});
</script>
[/php]

Additionally, if your website have a sticky header some of the content of the target element will go underneath the sticky header to avoid this we have to rewrite the code.

We have to get the height of the sticky header by adding this code
[php]
var headerHeight = $(".stickyheader").height();
[/php]

then we have to change this code
[php]
scrollTop: target.offset().top
[/php]

to this
[php]
scrollTop: target.offset().top – headerHeight
[/php]

this will subtract the sticky header height to the target offset

the final code should be like this
[php]
<script>
jQuery(function($) {
$(‘a[href*=#]:not([href=#])’).click(function() {
var headerHeight = $(".stickyheader").height();
if (location.pathname.replace(/^\//,”) == this.pathname.replace(/^\//,”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $(‘[name=’ + this.hash.slice(1) +’]’);
if (target.length) {
$(‘html,body’).animate({
scrollTop: target.offset().top – headerHeight
}, 500);
return false;
}
}
});
});
</script>
[/php]

If this steps are difficult I suggest to check wordpress plugin here https://wordpress.org/plugins/search/smooth+scroll/ that have the functionality you need. Goodluck 🙂