dile-smooth-scroll
Version:
Webcomponent dile-smooth-scroll smooth scroll component
43 lines (39 loc) • 4.34 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background: #fafafa;
}
</style>
</head>
<script src="../dile-smooth-scroll.js" type="module"></script>
<body>
<style>
body{
font-size: 1.2em;
font-family: Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
</style>
<dile-smooth-scroll scrollToElementOnInit="myP"></dile-smooth-scroll>
<h1>Creating scroll on page initialization</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aspernatur, ea nisi ullam quasi impedit ducimus exercitationem debitis labore quas est obcaecati quisquam? Quae deleniti explicabo officiis porro alias repudiandae?</p>
<p>Ipsam porro minus laboriosam officia tempore neque laudantium, delectus temporibus recusandae! Iure laudantium esse voluptatum fugiat molestias eos velit, porro amet repellendus aperiam consequatur sequi quibusdam eveniet autem quia. Sed.</p>
<p>Nisi, libero voluptatem, illo odio voluptates perspiciatis, iusto incidunt ut possimus maxime assumenda non labore mollitia at dicta quis laboriosam consequuntur voluptatum necessitatibus ea aliquam dignissimos sit dolorum! Aperiam, ducimus?</p>
<p>Excepturi, consequatur. Praesentium reiciendis soluta architecto numquam cupiditate quaerat nisi exercitationem debitis? Minima possimus officia ipsa amet consequatur dolor, deserunt vel, nobis odit cumque inventore esse delectus id iste tenetur.</p>
<p>Consequatur, voluptatibus. Quo voluptatum animi fugit reiciendis sapiente ut similique adipisci dolores aliquam harum cupiditate voluptates itaque quae culpa, nesciunt quia esse commodi quos incidunt, provident doloribus? Tempore, in reiciendis.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam aspernatur, ea nisi ullam quasi impedit ducimus exercitationem debitis labore quas est obcaecati quisquam? Quae deleniti explicabo officiis porro alias repudiandae?</p>
<p>Ipsam porro minus laboriosam officia tempore neque laudantium, delectus temporibus recusandae! Iure laudantium esse voluptatum fugiat molestias eos velit, porro amet repellendus aperiam consequatur sequi quibusdam eveniet autem quia. Sed.</p>
<p>Nisi, libero voluptatem, illo odio voluptates perspiciatis, iusto incidunt ut possimus maxime assumenda non labore mollitia at dicta quis laboriosam consequuntur voluptatum necessitatibus ea aliquam dignissimos sit dolorum! Aperiam, ducimus?</p>
<p>Excepturi, consequatur. Praesentium reiciendis soluta architecto numquam cupiditate quaerat nisi exercitationem debitis? Minima possimus officia ipsa amet consequatur dolor, deserunt vel, nobis odit cumque inventore esse delectus id iste tenetur.</p>
<p>Consequatur, voluptatibus. Quo voluptatum animi fugit reiciendis sapiente ut similique adipisci dolores aliquam harum cupiditate voluptates itaque quae culpa, nesciunt quia esse commodi quos incidunt, provident doloribus? Tempore, in reiciendis.</p>
<div class="image"><img src="https://picsum.photos/340/800"></div>
<p id="myP">Scroll to this paragraph!!</p>
<p>Cum alias obcaecati magni exercitationem consectetur. Quidem officiis et esse iusto inventore, illum tempore! Placeat esse in explicabo quasi nisi excepturi id delectus aperiam odio. Laborum ea accusantium corrupti et.</p>
<p>Eligendi culpa cupiditate a neque provident soluta, fugit tenetur similique necessitatibus impedit harum recusandae nisi, cumque minima ab aperiam ullam nam reprehenderit sapiente, beatae deleniti corrupti facere mollitia. Qui, ducimus?</p>
<p>Autem dignissimos consequatur, blanditiis odio voluptates et? Error sunt aliquam mollitia exercitationem at incidunt similique, tempore explicabo magnam maxime necessitatibus odit eos quibusdam libero ipsa, adipisci perferendis delectus laborum non?</p>
<p>Corporis eius quibusdam perferendis aut dicta aperiam nam, sed fuga nesciunt! Vel pariatur voluptatibus ut dolorum assumenda atque ullam, alias aliquid doloremque voluptate iste ea, tempora repellendus numquam velit nobis?</p>
<p>Eum assumenda ipsum dignissimos dolorem perferendis sit quis doloremque, recusandae dolore distinctio accusantium alias eveniet aut maiores quo architecto eius laborum ipsam nobis possimus autem fugit. Vero provident aliquid nulla?</p>
</body>
</html>