Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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>
              
            
!

CSS

              
                @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;}
              
            
!

JS

              
                const myButton = document.querySelector('button');
const myTarget = document.querySelector('.target');

myButton.addEventListener('click',function(e){
 e.preventDefault;
 myTarget.scrollIntoView({behavior: 'smooth', block: 'start'})
})
              
            
!
999px

Console