On click scoll goes to top

user_14757959 0
Viewed 40

I'm making a project from 0. I just made a kind of pagination, left/right arrows with JS help on click one div is showing the other is hiding. The problem is whenever I click on any arrow the scroll bar is going top. It's kind of annoying. How can I fix this? In the snippet seems ok, but on my project, it's scrolling to the top

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>

css html javascript
1 Answers

I believe this is due to your <a> tag having an href attribute of "#", try "#!" instead, that should fix it.

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