Scroll Button not working as i want it to do

Question

I have a button on my website that scrolls automatic when i go into the website. I only want it to scroll if i press the button...

@import url(https://fonts.googleapis.com/css?
 family=Josefin+Sans:300,
400);
* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  scroll-behavior: smooth;
}

section {
  position: relative;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

section::after {
  position: absolute;
  bottom: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 80%;
  background-image: url(Bilder/MeetFriendsBackground.jpg);
  background-image: url(Bilder/MeetFriendsBackground.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  scroll-behavior: smooth;
}

<section id="section01" class="demo">
  <h1 class="lamf">Learn about MeetFriends!</h1>
  <a href="#section02"><span></span><scrollbutton><div><button class="scroll">Scroll</button></div></scrollbutton></a>
</section>
<section id="section02" class="demo"></section>

Anyone that knows what i should do?

Answer 1

maybe you can prevent body from scroll by applying overflow property overflow :hidden;

html,
body {
  height: 100%;
  scroll-behavior: smooth;
  overflow :hidden;
}