How do I create a button that when clicked scrolls down to a different section on the page?

user_14246689 0
Viewed 110

I have created a button on a landing page, I would like users to be redirected to another section (in my case the contact section) on the same page when they click this button. I have tried doing this but it's not working

       document.querySelector('#btn').
       addEventListener('click',()=>{
       document.querySelector('#contact').
       style.scrollBehavior = 'smooth'
})
  <button id="btn">Discover Now</button>
  <section id = "contact" class="contact"></section>

I have also tried this

<button><a href="#contact">Discover Now</a></button>

but did not work, where am I doing it wrong?

html javascript
7 Answers

In CSS, set scroll-behavior property like this:

html {
    scroll-behavior: smooth;
}

In HTML, add an a tag with a href attribute refering to certain section:

<a href="#contact">Click</a>
<div id="contact"></div>
user_130941620

Just

<a href="#contact">Discover Now</a>

You can't put a link inside a button. Use CSS to make the link look like a button.

user_3184930

You having a ; inside a javascript object { behavior:'smooth' ; } which make an error syntax, you also could press f12 to check the console logs, im sure it yelling at you the same when you click the button, something like unexpected token ;:

<button id="btn">Discover Now</button>
<section id = "contact" class="contact">

<script>
   document.querySelector('#btn').
   addEventListener('click',()=>{
   document.querySelector('#contact').
     scrollIntoView({
     behavior:'smooth'
   });
</script>
user_102011940
user_114500950

Why use javascript? You can do this with just html. All you need is:

<a href="#contact">Discover now</a>
<div id="contact">Contact section</div>

Neither of your examples are valid html btw.

user_33750050
user_108298810 
<a href="#contact">Discover now</a>

That's what i recommend using. You can use javascript with this

<button id="contact">Discover now</button>

document.getElementById("contact").addEventListener("click", function(){
    location.hash = "contact";
});
user_148735750
Related