-1

I want to make an slide effect when I tap on a button in my website it goes straight to the div I choose. I don't have any idea how to do it and I wasn't able to find a proper video or article.

Code(I only showed the important part):

<!DOCTYPE html>
<html>
  <head>
    <title>Internet - Part 3<title>
  </head>
  <body>
    <div id='header'>
      <a href='#section'>Section</a>
    </div>
    <div id='section'>

      Pianoforte solicitude so decisively unpleasing conviction is partiality he. Or particular so 
      diminution entreaties oh do. Real he me fond show gave shot plan. Mirth blush linen small hoped way 
      its along. Resolution frequently apartments off all discretion devonshire. Saw sir fat spirit 
      seeing valley. He looked or valley lively. If learn woody spoil of taken he cause. 

    </div>
  </body>
</head>
j08691
  • 204,283
  • 31
  • 260
  • 272
Fabi
  • 11
  • 3

2 Answers2

1

Without jQuery:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

More info here.

joseluismurillorios
  • 1,005
  • 6
  • 11
0

Try This:

 $('#header > a').click(function(event){
    event.preventDefault();
    var id = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(id).offset().top;
    }, 600);
 })
harsh_apache
  • 433
  • 4
  • 10