停止“ JavaScript函数触发CSS宽度”影响滚动屏位置（在移动设备上）

Question

这可能是一个简单的问题，但我很努力：

在此website索引页面上，如果您向下滚动到交互式地图，则为。

此问题也出现在笔记本电脑的Web浏览器上。（刚刚发现！

ps。这是iframe html的嵌入式地图！参见源HTML：

<iframe id="iframe" width="100%" height="620px" src="leaflet_v1/index.html"></iframe>

基本上是单击很多（区域）后，将显示信息部分。 （这是从QGIS的传单网络地图制作的）->我在这里更改了JS代码以显示滑块信息：

function popup(){
                document.getElementById('slider').style.width='75%';
                document.getElementById('slider').style.zIndex='1000';
                //..then insert data
                //.. put a inline html for js Close function
            }

layer.bindPopup(popup, {maxHeight: 400});

在传单索引页面的末尾，我有一个更接近JS功能的部分：

   <script>
    function CloseSlider(){
        document.getElementById('slider').style.width='1px';
    }
   </script>

但是奇怪的是，当您使用“移动设备”上的该按钮关闭该部分时，屏幕将跳起来并使地图停留在屏幕顶部。

我希望我可以取消这种效果。

:)谁能解决？ ：）

如果您需要查看该滑块的css设置，请转到：

<style>
    .slider{
        height: 100%;
        width:2px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color:rgb(39,57,66);
        opacity: 0.90;
        padding-left: 20px;
        padding-top: 20px;
        overflow-x: hidden;
        transition: 0.3s;
    }


    .slider a{
        padding: 5px 20px 5px 0px;
        text-decoration: none;
        font-size: 15px;
        color: pink;
        display: block;
        transition: 0.3s;
    }

    .slider a:hover{
        background-color:rgb(39,57,66);
        color: white;
    }

    .slider .btn-close{
        position: absolute;
        top:0;
        right: 10px;
        font-size: 35px;
        margin-left: 30px;
    }



    </style>

希望这不是太复杂：）

Answer 1

令人惊讶的是，解决方案是如此愚蠢：摆脱：

href="#"

来自<a>元素...