I've recently added an Animated Mouse Scroll Down button on my website. However, when I click the button, the smooth scroll feature is not working as expected.
Important Note: I already have a separate button for navigating to the next section where smooth scrolling works perfectly!
Code for Animated Mouse scroll button activities.html:
<span class="scroll-btn"><a href="#about"><span class="mouse"><span></span></span></a><p>scroll me</p></span>
Code for Animated Mouse scroll button activities.css:
p {
margin-left: -55px;
}
@-webkit-keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
@-moz-keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
@keyframes ani-mouse {
0% {
opacity: 1;
top: 29%;
}
15% {
opacity: 1;
top: 50%;
}
50% {
opacity: 0;
top: 50%;
}
100% {
opacity: 0;
top: 29%;
}
}
.scroll-btn {
// Remaining CSS code here...
}
//Continued CSS styling
.scroll-btn .mouse {
position: relative;
display: block;
width: 35px;
height: 55px;
margin: 0 auto 20px;
}
//Smooth scrolling JS:
function smoothScrolling($links, $topGap) {
var links = $links;
var topGap = $topGap;
links.on("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 - topGap
}, 1000, "easeInOutExpo");
return false;
}
}
return false;
});
}
Next section activities html:
<div class="txtanim1 next-section">
<span><a href="#about">about me <strong><i class="fa fa-question-circle"</i>
</strong></a></span>
</div>