javascript - 点击 scoll 到顶部

Question

我正在从 0 开始做一个元素。我只是做了一种分页，左/右箭头在 JS 帮助下单击一个 div 显示另一个正在隐藏。问题是每当我单击任何箭头时，滚动条都会变到顶部。这有点烦人。我怎样才能解决这个问题？在代码片段中似乎没问题，但在我的元素中，它滚动到顶部

let elTwo = document.getElementById('list_two');
let elOne = document.getElementById('list_one');

let left = document.getElementById('paga_left');
left.addEventListener('click', function(){

    if(elTwo.style.display =='none'){
        elTwo.style.display = 'flex'
        elOne.style.display = 'none'

    }else{
        elOne.style.display = 'flex'
        elTwo.style.display = 'none'

    }
})

let right = document.getElementById('paga_right');
right.addEventListener('click', function(){

    if(elOne.style.display == 'none'){
        elTwo.style.display = 'none';
        elOne.style.display = 'flex'

    }else{
        elTwo.style.display = 'flex';
        elOne.style.display = 'none';

    }
})

/* listings */
#listings{
    position:relative;
    height:600px;
}
.listing-one{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}
.listing-two{
    display:none;
}
.paga-left{
    position:absolute;
    top:20vh;
    left:5px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
.paga-right{
    position:absolute;
    top:20vh;
    right:5px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    transition: background-color .3s;
    border: 1px solid #ddd;
}
.paga-left:hover{
    background-color: var(--colorDefault-background-color);
    color: white;
    border: 1px solid var(--colorDefault-background-color);
}
.paga-right:hover{
    background-color: var(--colorDefault-background-color);
    color: white;
    border: 1px solid var(--colorDefault-background-color);
}

   <div id="listings">
        <div class="pagination">
            <a id = 'paga_left' class = 'paga-left' href="#">❮</a>
            <a id = 'paga_right' class = 'paga-right' href="#">❯</a>
        </div>
        <div id = 'list_one' class="listing-one">
            <div class="box">
                <div class="box-image">
                    <img src = './images/sunset-over-ohrid-lake.jpeg'>
                    <h3 class = 'box-price'>€&nbsp;14700</h3>
                    <div class="vip-container"><span class="material-icons">verified</span></div>
                </div>
                <div class = 'box-title col center'>
                    <h2 class = 'fntmk py'>Title</h2>
                    <h3 class = 'fntmk py'><i class="fas fa-map-marker-alt icon"></i>&nbsp;Loc</h3>
                </div>
                <div class = 'separator my2'></div>
                <div class="box-content">
                    <table>
                        <tr>
                            <td class = 'px py fntmk'><i class="fab fa-microsoft icon size2"></i>&nbsp;m²&nbsp; 48</td>
                            <td class = 'px py fntmk'><i class="fas fa-bath icon size"></i>&nbsp;Bad&nbsp;1</td>
                        </tr>
                        <tr >
                            <td class = 'px py fntmk'><i class="fas fa-warehouse icon size"></i>&nbsp;Gara`i&nbsp;2</td>
                            <td class = 'px py fntmk'><i class="fas fa-bed icon size"></i>&nbsp;Spalni&nbsp;4</td>
                        </tr>
                    </table>
                    <div class = 'separator my2'></div>
                    <div class="col">
                        <p class = 'px py fntmk'><i class="fas fa-user-tie icon size"></i>&nbsp;John</p>
                        <p class = 'px py'><i class="fas fa-clock icon size"></i>&nbsp;1 week, 5 days ago</p>
                    </div>
                    <button class = 'btn-view fntmk'>View</button>
                </div>
            </div>
        </div>
        <div id = 'list_two' class="listing-two">
            <div class="box">
                <div class="box-image">
                    <img src = './images/sunset-over-ohrid-lake.jpeg'>
                    <h3 class = 'box-price'>€&nbsp;14700</h3>
                    <div class="vip-container"><span class="material-icons">verified</span></div>
                </div>
                <div class = 'box-title col center'>
                    <h2 class = 'fntmk py'>Title</h2>
                    <h3 class = 'fntmk py'><i class="fas fa-map-marker-alt icon"></i>&nbsp;Lokacija</h3>
                </div>
                <div class = 'separator my2'></div>
                <div class="box-content">
                    <table>
                        <tr>
                            <td class = 'px py fntmk'><i class="fab fa-microsoft icon size2"></i>&nbsp;m²&nbsp; 48</td>
                            <td class = 'px py fntmk'><i class="fas fa-bath icon size"></i>&nbsp;Bath&nbsp;1</td>
                        </tr>
                        <tr >
                            <td class = 'px py fntmk'><i class="fas fa-warehouse icon size"></i>&nbsp;Gara`i&nbsp;2</td>
                            <td class = 'px py fntmk'><i class="fas fa-bed icon size"></i>&nbsp;B&nbsp;4</td>
                        </tr>
                    </table>
                    <div class = 'separator my2'></div>
                    <div class="col">
                        <p class = 'px py fntmk'><i class="fas fa-user-tie icon size"></i>&nbsp;John</p>
                        <p class = 'px py'><i class="fas fa-clock icon size"></i>&nbsp;1 week, 5 days ago</p>
                    </div>
                    <button class = 'btn-view fntmk'>View</button>
                </div>
            </div>
            <div class="box">
                <div class="box-image">
                    <img src = './images/sunset-over-ohrid-lake.jpeg'>
                    <h3 class = 'box-price'>€&nbsp;14700</h3>
                    <div class="vip-container"><span class="material-icons">verified</span></div>
                </div>
                <div class = 'box-title col center'>
                    <h2 class = 'fntmk py'>Title</h2>
                    <h3 class = 'fntmk py'><i class="fas fa-map-marker-alt icon"></i>&nbsp;Loc</h3>
                </div>
                <div class = 'separator my2'></div>
                <div class="box-content">
                    <table>
                        <tr>
                            <td class = 'px py fntmk'><i class="fab fa-microsoft icon size2"></i>&nbsp;m²&nbsp; 48</td>
                            <td class = 'px py fntmk'><i class="fas fa-bath icon size"></i>&nbsp;Bath&nbsp;1</td>
                        </tr>
                        <tr >
                            <td class = 'px py fntmk'><i class="fas fa-warehouse icon size"></i>&nbsp;Gara`i&nbsp;2</td>
                            <td class = 'px py fntmk'><i class="fas fa-bed icon size"></i>&nbsp;Bad&nbsp;4</td>
                        </tr>
                    </table>
                    <div class = 'separator my2'></div>
                    <div class="col">
                        <p class = 'px py fntmk'><i class="fas fa-user-tie icon size"></i>&nbsp;John</p>
                        <p class = 'px py'><i class="fas fa-clock icon size"></i>&nbsp;1 week, 5 days ago</p>
                    </div>
                    <button class = 'btn-view fntmk'>View</button>
                </div>
            </div>
        </div>
    </div>

Answer 1

我相信这是由于您的 <a> href 属性为“#”的标签，试试“#!”相反，这应该可以解决它。

<div class="pagination">
    <a id = 'paga_left' class = 'paga-left' href="#!">❮</a>
    <a id = 'paga_right' class = 'paga-right' href="#!">❯</a>
</div>