Cara membuat effect smooth scrolling dengan javascript

6/09/2019 06:04:00 pm Tags:

CARA MEMBUAT EFFECT SCROLLING DENGAN JAVASCRIPT


Aplikasi ini di buat dengan bahasa css, javascript dan html

Smooth scrolling effect in JS
Cara membuat effect smooth scrolling dengan javascript





Source Code


Kodenya :

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <title>Indianaweb.blogspot</title>
  5.  <style type="text/css">
  6.   body {
  7.    padding: 10px 400px;
  8.   }
  9.  
  10.   .button-container {
  11.    position: fixed;
  12.    bottom: 20px;
  13.    right: 20px;
  14.    background: #fff;
  15.    border: 1px solid #ccc;
  16.    padding: 10px;
  17.   }
  18.  </style>
  19. </head>
  20. <body>
  21. <h2 id="top">JavaScript</h2>
  22. <p>
  23. Lorem Ipsum is simply dummy text of the printing and typesetting industr
  24. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  25. when an unknown printer took a galley of type and scrambled it to make a type
  26. specimen book. It has
  27. </p>
  28. <p id="test">
  29. Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
  30. Lorem Ipsum has been the industry's standard dummy text ever since the 1500
  31. when an unknown printer took a galley of type and scrambled it to make a type 
  32. specimen book. It has
  33. </p>
  34. <h2>Beginnings at Netscape</h2>
  35. <p>
  36. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  37. Lorem Ipsum has been the industry's standard dummy text ever since the 150
  38. when an unknown printer took a galley of type and scrambled it to make a type
  39. specimen book. It has
  40. </p>
  41. <p>
  42. Lorem Ipsum is simply dummy text of the printing and typesetting industry
  43. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  44. when an unknown printer took a galley of type and scrambled it to make a type 
  45. specimen book. It has
  46. </p>
  47.  
  48.  <div class="button-container">
  49.   <button onclick="scrollToBottom();">Scroll to Bottom</button>
  50.   <button onclick="scrollByUnits();">Scroll by 300</button>
  51.   <button onclick="scrollToElement();">Scroll to Element</button>
  52.   <button onclick="scrollToTop();">Scroll to top</button>
  53.  </div>
  54.  
  55.  <script type="text/javascript">
  56.   function scrollToBottom() {
  57.    window.scroll({
  58.     top: document.body.scrollHeight,
  59.     left: 0,
  60.     behavior: 'smooth'
  61.    });
  62.   };
  63.  
  64.   function scrollByUnits() {
  65.    window.scrollBy({
  66.     top: 300,
  67.     left: 0,
  68.     behavior: 'smooth'
  69.    });
  70.   };
  71.  
  72.   function scrollToElement() {
  73.    document.querySelector('#test').scrollIntoView({
  74.     behavior: 'smooth'
  75.    });
  76.   };
  77.  
  78.   function scrollToTop() {
  79.    document.querySelector('#top').scrollIntoView({
  80.     behavior: 'smooth'
  81.    });
  82.   };
  83.  </script>
  84.  
  85. </body>
  86. </html>


Jika masih bingung silahkan download SOURCE CODENYA disini
Server  [SF] Server  [MF]

Jika kakak masih bingung lihat juga videonya dibawah ini

Jangan lupa share artikel ini ya...




Tags : 
Previous Post
Next Post
Related Posts