使用scrollTop

Question

当我在我的两个按钮上激活ScrollTop效果时，我的CSS出了问题：css效果适用，尽管：

.hcb_link a {
    color: inherit;
}

.hcb_link a:hover, a:active {
    color: inherit;
    text-decoration: none;
}

当页面移动时链接变为黑色并加下划线...我希望它保持白色而不加下划线。

我的JS需要做些什么吗？

提前致谢。

$('a[href^="#"]').click(function(){
    var the_id = $(this).attr("href"),
        yPos = $(the_id).offset().top,
        speed = 1500;

    $('html, body').animate({
        scrollTop: yPos -71     // -71px pour prendre en compte la taille du bandeau supérieur.
    }, speed);
    return false;
});

a:hover,
a:focus {
    color: #000000;
    text-decoration: underline;
}

.carrousel {
    width: 100%;
    max-width: 1000px;
    margin: auto;

}

.hcb_link {
    background: #D5420F;
    width: 300px;
    font-size: 18px;
    padding: 10px 0px;
    margin: 10px auto 30px;
    border-radius: 2px;
    cursor: pointer;
    color: white;
}

.hcb_link:hover {
    background-color: rgba(215, 66, 34, .9);
}

.hcb_link a {
    color: inherit;
}

.hcb_link a:hover, a:active, a:focus{
    color: inherit;
    text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carrousel">
    <div class="row">
        <div class="col-sm-4 col-sm-offset-2">
            <div class="row">
                <div class="col-sm-9 col-sm-offset-2 hcb_link">
                    <a href="#ancreProfessionnel">Vous êtes un professionnel</a>
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="row">
                <div class="col-sm-9 col-sm-offset-1 hcb_link">
                    <a href="#ancreEtudiant">Vous êtes un étudiant</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="ancreProfessionnel" class="hss_container light_background" style="min-height:520px;">
    <div class="max_width">

        <div class="hssc_title"><span class="third_color">Entrepreneurs</span>, démultipliez votre force commerciale grâce à des étudiants rémunérés au succès
        </div>

    </div>
</div>

<div id="ancreEtudiant" class="hss_container dark_background" style="min-height:490px; border-bottom: 1px solid white;">
    <div class="max_width">

        <div class="hssc_title"><span class="fourth_color">Étudiants des Grandes Écoles</span>, mettez vos compétences et votre énergie à profit
        </div>

    </div>
</div>       
    
<div id="ancreEtudiant" class="hss_container dark_background" style="min-height:490px; border-bottom: 1px solid white;">
  <div class="max_width">

    <div class="hssc_title"><span class="fourth_color">Étudiants des Grandes Écoles</span>, mettez vos compétences et votre énergie à profit
    </div>

  </div>
</div>

感谢@René和@Cthulhu，我做了一些改变。

但它尽管一切都接缝，但它是触发的Bootstrap：

a:hover,
a:focus {
    color: #000000;
    text-decoration: underline;
}