how to make button go to the middle of another page-CodePudding

I will not add the code but I need to make my button not just go to another page, but go to the middle section of the page. Like I want the button to lead to a scrolled down page. Does anyone know what to do ?

CodePudding user response：

add id in the div of the page like <div id="hello">some thing here</div> and on button you can use something like this <button><a href="#hello">scroll</a></button>

I'm assuming that just want your button to scroll down to section of the page. if i'm wrong then comment I'll edit the answer according to it.

#hello{
margin-top:20px;
margin-bottom:500px;
}
.height{
height:500px;
}
html{
scroll-behavior:smooth;
}

<div>
<button>
<a  href="#hello">scroll</a>
</button>
<div >
</div>
<div  id="hello">Hello</div>
</div>

CodePudding user response：

I believe the simplest way to achieve this would be to create a pair of tags, one for the button and one that is invisible at the desired destination. A basic example would be as follows:

<body>
    <div id="header">
        <h1>Title</h1>
    </div>
    <div >
        <div >
            <a href="#third"><button>Go To 3rd Section</button></a>
            <h1>My First Heading</h1>
            <p>My first paragraph.</p>
        </div>
        <div >
            <h1>My Second Heading</h1>
            <p>My second paragraph.</p>
        </div>
        <div >
            <a id="third"></a>
            <h1>My Third Heading</h1>
            <p>My third paragraph.</p>
        </div>
    </div>
</body>

After applying the appropriate css for your application, this would be a very simple way to link to a particular part of the page. The destination 'a' tag has a specified id

<a id="destination"></a>

while the corresponding button, which is wrapped inside an 'a' tag, has the href pointing to a particular id

<a href="#destination"><button>Destination</button></a>.

Hope this answers your question!