Why isn't <a> </a> tags working?

Question

I am making an html code and I made some <a> </a> tags with the attribute href="#bottom" but it doesn't work. Can someone tell me how to fix it and why it doesn't work (,,•᷄‎ࡇ•᷅ ,,)?

https://sololearn.com/compiler-playground/WEUKe2KXznHD/?ref=app

Answer 1

♬Astro-GingyFlake🇹🇷
you have to give your button the id="bottom"

<button id="bottom" class="secret" onclick="secret()">Click me...</button>

so that clicking the link will make the page scroll to the button.

also, to remove the underline for a, you can use

a{
text-decoration:none;
}

in your css

you can also add scrollTo to your javascript secret function so that the page scrolls back to the top when the button is clicked.

function secret(){
.... your code ...

window.scrollTo(0,0);
}

Answer 2

♬Astro-GingyFlake🇹🇷
here is a pure js scrollIntoView example without using a and href.

https://sololearn.com/compiler-playground/WdlSolkk3Po8/?ref=app

Answer 3

♬Astro-GingyFlake🇹🇷
Your code still have errors. The id bottom have to be assigned to the button, not the link.

Here is the fixed version of your code. I also renamed the class 'body' to 'box', because '.body' is easy to confuse with tagName 'body'.

https://sololearn.com/compiler-playground/Wuq93vNK6fe8/?ref=app