javascript - 我正在编写一个页面，该页面在单击链接时向下滚动。点击后显示为蓝色

Question

所以我正在编写一个网站，该网站的主页有一个跨度，允许您单击它，然后向下滚动到一个新部分，滚动有效，然后向下滚动，但如果我手动向上滚动，文本显示为蓝色并加下划线。有什么办法可以阻止这种情况发生。

    <a class="Scroll" href="#section02"><span></span>Scroll</a>

这是我使用的 HTML，新部分的 ID 为 section02。

$(function() {
$('a[href*=#]').on('click', function(e) {
    e.preventDefault();
    $('html, body').animate({ scrollTop: 
$($(this).attr('href')).offset().top}, 500, 'linear');
    });
});

这是用到的JS。

.Scroll {
position: absolute;
height: 20px;
z-index: 20;
display: inline-block;
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}

.Scroll::after{
position: absolute;
height: 20px;
z-index: 20;
display: inline-block;
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}

.Scroll:hover {
    opacity: .5;
    color: #fff;
    text-decoration: none;
}

这是我使用的 CSS，我认为它可能是因为我在单击链接后没有样式，但问题仍然存在，尽管悬停样式在滚动条为蓝色时仍然有效。

What the scroll link looks like before.

And what it looks like after being pressed and manually scrolling up.

感谢任何帮助

Answer 1

试试这个:

.Scroll a, a:hover, a:visited, a:link, a:active {
    color: #FFFFFF;
    text-decoration: none;
}

text-decoration: none; 应该可以解决问题并删除下划线。如果它仍然不起作用，请在 text-decoration 之后添加 !important，如下所示:text-decoration: none !important;