Stop 'JavaScript function triggering css width' from affecting scrolling-screen position (On Mobile device)

Question

This might be a simple issue to fix but I struggled:

On this website index page, if you scroll a bit down to interactive map.

This problem also arises on web browser on laptop as well.(just discovered!

ps. This was an embedded map as iframe html! See source html:

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

Basically after you click a lot (area), the info section will show up. (this is made from leaflet web map from QGIS)--> I changed JS code here to make slider info appear:

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});

At the end of the leaflet index page, I got a section closer JS function:

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

BUT weird thing is that when you close the section using that button on "MOBILE DEVICES", the screen will JUMP UP and make the map stick at the top of the screen.

I wish I can cancel this effect.

:) Can anyone solve it ? :)

If you need to see the css setting for that slider , here you go:

<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>

Hope this is not too complex :)

Answer 1

Surprisingly, the Solution is so silly: Get rid of the:

href="#"

from <a> element...