CSS 的伪元素来实现自定义滚动条的样式。在父元素上设置 "overflow: auto;" 以启用滚动，并且使用 "-webkit-scrollbar" 属性来控制滚动条的样式。
示例 CSS 代码：
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 8px; /* 宽度 */
}
/* 滚动条背景色 */
::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/* 滑块颜色 */
::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 10px;
}
/* 滑块当鼠标悬停时的颜色 */
::-webkit-scrollbar-thumb:hover {
background-color: #aaa;
}要实现滚动效果，可以使用 CSS3 的 "transition" 属性来添加过渡效果。同时，在需要进行动画的元素上添加一个合适的 CSS 类名，然后使用 JavaScript 动态添加或删除该类名以触发动画。
示例 CSS 代码：
/* 添加动画效果 */
.scroll-animation {
transition: all .3s ease-in-out;
}
/* 滚动至顶部时添加 ".scroll-animation" 类名 */
$("#btn-top").on("click", function() {
$("html, body").animate({ scrollTop: 0 }, 500);
$("body").addClass("scroll-animation");
});
/* 在滚动到顶部后删除 ".scroll-animation" 类名 */
$(window).on("scroll", function() {
if ($(this).scrollTop() === 0) {
$("body").removeClass("scroll-animation");
}
});需要注意的是，自定义滚动条和滚动效果可能会影响用户体验，因此应该谨慎使用，确保它们对网站性能和可用性没有任何负面影响。