Smooth Scroll Test Demo
Test weith library smooth-scroll https://github.com/cferdinandi/smooth-scroll
by Ritchie Zhu
HTML
<script src="//cdn.bootcss.com/smooth-scroll/12.1.0/js/smooth-scroll.min.js"></script>
<link rel="stylesheet" href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<article>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
<p>很长的文章</p>
</article>
<hr>
<div id="SOHUCS">
这里是评论区
</div>
<div...SCSS
.suspension {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1000;
a {
display: block;
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
border-radius: 50%;
background-color: white;
border: 1px solid #ccc;
box-shadow: 0 1px 4px #ccc;
text-align: center;
opacity: 1;
cursor: pointer;
& + a {
margin-top: 1rem;
}
&.to-top {
color: grey;
transition: all ease-out 0.5s;
&:hover {
color: white;
background-color: grey;
border-color: grey;
}
}
&.to-comment {
color: green;
transition: all ease-out 500;
&:hover {
color: white;
background-color: green;
border-color: green;
}
}
}
.is-hide {
display: none;
}
}JavaScript
const scroll = new SmoothScroll('a[href*="#"]');
const toTopBtn = document.querySelector('.to-top');
toTopBtn.addEventListener('click', () => {
scroll.animateScroll(0);
});