CODEWITHSUNDEEP
javascripthtmlcssbutton
dpreese
dpreese

Reputation: 41

scrollIntoView() not working with buttons Javascript + HTML

I am making a navigation side bar that consists of buttons with the onclick tag calling on a JavaScript function that has a div id passed into it using the scrollIntoView function. It is then supposed to take the user to the div with that id value that was passed into the method. It initially worked but has now stopped even though I haven't touched it since i made it.

Here's the code:

<script>
    //Function is used to pass in the div's name and have it act as a scroll anchor
    function scroll(divName)
    {
        const x = document.getElementById(divName) 
        x.scrollIntoView(true)
    }
</script>

<!-- Div is for the navigation bar on the left side of the page -->
<div class="page-nav">
    <h5>On this Page:</h5>
    //Buttons with corresponding div names passed to Javascript method
    <button onclick="scroll(Community)">Community</button> <br />
    <button onclick="scroll(TypesAndRates)">Room Types and Rates</button> <br />
    <button onclick="scroll(ServicesAndAmenities)">Services and Amenities</button> <br />
    <button onclick="scroll(Map)">Map</button> <br />
</div>

And here's the css I added to it

.page-nav {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: calc(16.67% - 15px);
    overflow-wrap: break-word;
    padding: 2em 2em 0 2em;
    background-color: #E6E6E6;
    border: 2px solid #fff;
    overflow-x: auto;
}
    
.page-nav button {
    border: 0;
    padding: 0;
    background-color: #E6E6E6;
    color: #069;
    margin-bottom: 0.6em;
    margin-left: 0.8em;
}

I tried removing the CSS to see if that was the cause since that was the only thing I've changed that is associated with the buttons + JavaScript but it didn't do anything. Any help is appreciated!

Upvotes: 0

Views: 61

Answers (1)

Dishonered
Dishonered

Reputation: 8841

Try this

<button onclick="scroll('Community')">Community</button> <br />

Upvotes: 1

Related Questions