'I want to navigate to a div using a button HTML

I am using this code for button:

 <input type="button"
        style="margin-left:350px"
        id="replybottom"
        name="replybottom"
        onClick="#navigateHere"
        class="button"
        value="Reply"></div>

this is my div:

<div id="navigateHere"
     name="navigateHere"
     class="convomsg12">
phphtmlnavigation


Solution 1:[1]

Try using an anchor instead of a button 

<a href='#navigateHere'>Reply</a>

Or you can add a javascript event on your button, like this:

<button onClick='window.location="#navigateHere"'>Reply</button>

Solution 2:[2]

An onclick attribute should contain JavaScript, not a URL.

However, since you are linking somewhere: use a link. You can apply CSS to make it look however you want.

<a href="#navigateHere">Reply</a>

Solution 3:[3]

Farla's response should work, perhaps check if you have other event handlers attached to the event. With this

<input type="button" style="height:400px" onclick="window.location='#zzzz'; event.stopImmediatePropagation()"/>

<div id="zzzz" style="height: 400px;"></div>

you can stop other handlers that are attached to the same event. If you had (for example)

<script type="text/javascript">
    $(document).ready(function () {
       $("button").click(function () { alert("click response"); })
    });
</script>

it would not be triggered. Just beware it may interfere with functionality you may have (plugins or own code) that may depend on those extra handlers.

Solution 4:[4]

Late but might work better than other answers.


const goTo = () => {
   document.getElementById("hero").scrollIntoView({ behavior: "smooth" });
   document.activeElement.blur(); //optional if you want to blur active element.
}

<button onClick="goTo()">Go To</button>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Thomas
Solution 2 Quentin
Solution 3 Daru
Solution 4 Gopal Mishra

Related Questions