防止在固定位置div上使用jquery淡入/淡出功能时自动向上滚动页面答案

【问题标题】：prevent automatically page scroll up when using jquery fadein/out founction on fixed position div防止在固定位置div上使用jquery淡入/淡出功能时自动向上滚动页面
【发布时间】：2017-12-06 06:34:18
【问题描述】：

我有一个网页，我想通过单击按钮制作一个显示在屏幕右侧的 div（div 和按钮都有固定位置）我使用 jQuery 淡入/淡出让它出现

效果很好，但是当我点击按钮时，页面会自动滑到顶部

html代码：

<div class="fixedDiv">
    <div class="fixedDiv liveSupportFrame" style="background: #f8aa00;display: none" id="lsf">
        <div class="container" style="background-color:#d8d6d6;">
        ............
        </div>
    </div>

    <a class="btn btn-warning sideBtn" onclick="showOrHideLiveSupport();" role="button" href="#">FAQ</a>

CSS 代码：

.fixedDiv{
position: fixed;
bottom: 25%;
right: 0em;
}
.fixedDiv .liveSupportFrame{
margin-right: 2em;
margin-bottom: 1em;
font-size:1.6vw;
bottom: 30%;
}

JS代码：

        var isLsfOpen = 0;
    function showOrHideLiveSupport() {
       if(!isLsfOpen){
           showLiveSupport()
       }
       else{
           hideLiveSupport()
       }
    }
    function showLiveSupport() {
        $('#lsf').fadeIn();

        isLsfOpen=true;
    }
    function hideLiveSupport() {
        $('#lsf').fadeOut();
        isLsfOpen=false;
    }

【问题讨论】：

标签： javascript jquery html css bootstrap-4

【解决方案1】：

那是因为href="#"。在您的处理程序中使用event.preventDefault();。

【讨论】：