Why does my page instantly scroll down each time I reload the site? Also how can I place "About-CodePudding

So I added smooth scrolling and a button that scrolls you to the bottom and that's the point but now every time I load in and reload the site etc. it automatically scrolls down. I also want to put the "About me" heading further down so it isn't visible unless you click "Click to learn more"

Picture of the site: https://i.gyazo.com/79313e6ee1fe3de82d18b33f238ac5d9.jpg HTML CODE:

<html>
<head>
    <title>Intriguing Copy</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div >
        <div >
            <img src="logo.png" >
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">Samples</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
<div >           
    <h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>


<div >
    <a href="#down"><button type="button"><span></span><b>CLICK TO LEARN MORE</button></a>
        <div id="down">
            <h1>About me</h1>
        </div>
  </body>
</html>

CodePudding user response：

I don't understand what you want to say provide CSS for easy to understand your problem.
Set #down as default display: none and then add script(see my code) and also add onclick="show()" in button element,

<html>
<head>
    <title>Intriguing Copy</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div >
        <div >
            <img src="logo.png" >
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About me</a></li>
                <li><a href="#">Samples</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
<div >           
    <h1>THE COPY THAT INTRIGUES BUT DONT DECEIVE</h1>


<div >
    <a href="#down"><button type="button" onclick="show()"><span></span><b>CLICK TO LEARN MORE</button></a>
        <div id="down">
            <h1>About me</h1>
        </div>
        <script>
            function show() {
                document.getElementById("down");
                down.style.display = "block";
            }
        </script>
  </body>
</html>

CodePudding user response：

This

<a href="#down"><button type="button"><span></span><b>CLICK TO LEARN MORE</button></a>

is invalid - you cannot nest interactive elements like that. Either use a button or use an anchor.

If your page is automatically scrolling, I'd assume you're reloading the page after clicking this anchor. I suspect that if you look at your browser's navigation bar, it will end with #down, like

https://whateveryourdomain.is/somepage.html#down

That's how page anchors work - the browser will attempt to scroll the page until the matching anchor tag or id'd element is at the top of the viewport.