This creates a conflict with MODAL POP-UP, so don't combine them !!
Arrow created with CSS only, no image file used.
Smooth Scrolling | CSS-Tricks - CSS-Tricks
// Smooth scroll to anchor
// Wroks as is!
jQuery($ => {
// The speed of the scroll in milliseconds
const speed = 1000;
$('a[href*="#"]')
.filter((i, a) => a.getAttribute('href').startsWith('#') || a.href.startsWith(`${location.href}#`))
.unbind('click.smoothScroll')
.bind('click.smoothScroll', event => {
const targetId = event.currentTarget.getAttribute('href').split('#')[1];
const targetElement = document.getElementById(targetId);
if (targetElement) {
event.preventDefault();
$('html, body').animate({ scrollTop: $(targetElement).offset().top }, speed);
}
});
});
// Smooth Scroll to Anchor within page
// Arrow created with CSS only, no image file used.
.arrow.scroll {
text-align: center;
a {
position: absolute;
bottom: 0;
margin-left: -15px;
margin-bottom: 30px;
display: inline-block;
width: 24px;
height: 24px;
border-top: 2px solid $beige;
border-left: 2px solid $beige;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
}
<!--Smooth Scroll to Anchor within page-->
<p class="arrow scroll">
<a href="#inner-content" title="Services"></a>
</p>
/********************************
Smooth Scroll Anchors within page
*********************************/
$('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
}, 700);
return false;
}
}
});