<div class="wrapButton"><button>Cliquez moi que je scroll !!</button></div>
<div class="myContent">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores corporis eligendi eaque esse nobis enim quae vitae qui maiores aut ipsum cupiditate in quaerat, voluptatem ratione dolorem et sapiente, vel temporibus fuga harum magnam necessitatibus! Nostrum quam, alias mollitia tempora quasi consequuntur. Illum vel rerum est laudantium, molestias distinctio odio iusto ipsa optio enim sunt autem culpa nesciunt perferendis incidunt asperiores facilis numquam minus exercitationem, quibusdam tenetur? Iste deleniti temporibus eos vero vel alias, ipsam dolore eveniet dolorem, similique praesentium eligendi qui illum optio id omnis ratione. Fuga saepe aliquid consequatur sit neque et, exercitationem quam perspiciatis mollitia recusandae delectus aperiam molestias earum. Et perspiciatis accusantium unde ipsum minus aliquid tempora necessitatibus soluta quia corrupti commodi, perferendis numquam qui veniam impedit hic! Quam suscipit hic odio necessitatibus quo, cumque inventore ipsam unde nulla quis ab error molestiae? Numquam odit culpa iure dolore repellat cupiditate. Voluptatibus incidunt odit tempore at distinctio? incidunt asperiores facilis numquam minus exercitationem, quibusdam tenetur? Iste deleniti temporibus eos vero vel alias, ipsam dolore eveniet dolorem, similique praesentium eligendi qui illum optio id omnis ratione. Fuga saepe aliquid consequatur sit neque et, exercitationem quam perspiciatis mollitia recusandae delectus aperiam molestias earum. Et perspiciatis accusantium unde ipsum minus aliquid tempora necessitatibus soluta quia corrupti commodi, perferendis numquam qui veniam impedit hic! Quam suscipit hic odio necessitatibus quo, incidunt asperiores facilis numquam minus exercitationem, quibusdam tenetur? Iste deleniti temporibus eos vero vel alias, ipsam dolore eveniet dolorem, similique praesentium eligendi qui illum optio id omnis ratione. Fuga saepe aliquid consequatur sit neque et, exercitationem quam perspiciatis mollitia recusandae delectus aperiam molestias earum. Et perspiciatis accusantium unde ipsum minus aliquid tempora necessitatibus soluta quia corrupti commodi, perferendis numquam qui veniam impedit hic! Quam suscipit hic odio necessitatibus quo.
</div>
<div class="target">
Et BIM !! Ma cible est là :)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio dolores dicta consequatur architecto mollitia quibusdam, delectus laboriosam non accusantium in accusamus veniam veritatis dolorem facere distinctio maxime dolor tempore et?
</div>
<div class="myContent">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores corporis eligendi eaque esse nobis enim quae vitae qui maiores aut ipsum cupiditate in quaerat, voluptatem ratione dolorem et sapiente, vel temporibus fuga harum magnam necessitatibus! Nostrum quam, alias mollitia tempora quasi consequuntur. Illum vel rerum est laudantium, molestias distinctio odio iusto ipsa optio enim sunt autem culpa nesciunt perferendis incidunt asperiores facilis numquam minus exercitationem, quibusdam tenetur? Iste deleniti temporibus eos vero vel alias, ipsam dolore eveniet dolorem, similique praesentium eligendi qui illum optio id omnis ratione. Fuga saepe aliquid consequatur sit neque et, exercitationem quam perspiciatis mollitia recusandae delectus aperiam molestias earum. Et perspiciatis accusantium unde ipsum minus aliquid tempora necessitatibus soluta quia corrupti commodi, perferendis numquam qui veniam impedit hic! Quam suscipit hic odio necessitatibus quo, cumque inventore ipsam unde nulla quis ab error molestiae? Numquam odit culpa iure dolore repellat cupiditate. Voluptatibus incidunt odit tempore at distinctio? incidunt asperiores facilis numquam minus exercitationem, quibusdam tenetur? Iste deleniti temporibus eos vero vel alias, ipsam dolore eveniet dolorem, similique praesentium eligendi qui illum optio id omnis ratione. Fuga saepe aliquid consequatur sit neque et, exercitationem quam perspiciatis mollitia recusandae delectus aperiam molestias earum. Et perspiciatis accusantium unde ipsum minus aliquid tempora necessitatibus soluta quia corrupti commodi, perferendis numquam qui veniam impedit hic! Quam suscipit hic odio necessitatibus quo, incidunt asperiores facilis numquam minus exercitationem, quibusdam tenetur? Iste deleniti temporibus eos vero vel alias, ipsam dolore eveniet dolorem, similique praesentium eligendi qui illum optio id omnis ratione. Fuga saepe aliquid consequatur sit neque et, exercitationem quam perspiciatis mollitia recusandae delectus aperiam molestias earum. Et perspiciatis accusantium unde ipsum minus aliquid tempora necessitatibus soluta quia corrupti commodi, perferendis numquam qui veniam impedit hic! Quam suscipit hic odio necessitatibus quo.
</div>
@import url('https://fonts.googleapis.com/css?family=Chilanka&display=swap');
body {background-color: #d9d9d9; padding: 15px;}
.wrapButton {text-align: center;padding: 5px 0;margin-bottom: 20px;}
button{border: 0; background: #b71c1c; color: #fff;padding: 15px 30px;font-size: 18px;font-family: 'Chilanka', cursive;}
.myContent{height: 700px;margin-bottom: 30px;background-color: #fff;padding: 15px;line-height: 22px;font-family: 'Chilanka', cursive;}
.target {background-color: #fff;padding: 15px;line-height: 22px;font-family: 'Chilanka', cursive;margin-bottom: 30px;}
View Compiled
const myButton = document.querySelector('button');
const myTarget = document.querySelector('.target');
myButton.addEventListener('click',function(e){
e.preventDefault;
myTarget.scrollIntoView({behavior: 'smooth', block: 'start'})
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.