API tools faq
paste
Advertisement
1xptolevitico69

Javascript auto scroll to Top while display text

1xptolevitico69
Jul 20th, 2022
1,064
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.29 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <link rel="shortcut icon" href="https://1xpto.netlify.app/items/favicon.gif" type="image/x-icon">
  5.   <link rel="name" href="https://www.facebook.com/ManuelJSAndrade/">
  6.   <link rel="name" href="https://www.instagram.com/jolie1xpto/">
  7.   <link rel="tag" href="https://1xpto.netlify.app/articles/html/Javascript auto scroll to Top while display text">
  8.   <meta charset="UTF-8">
  9.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  10.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11.   <title>Javascript auto scroll to Top while display text</title>
  12.   <style>
  13.     body {
  14.       cursor: context-menu;
  15.       margin: 0;
  16.       font-family: calibri;
  17.     }
  18.  
  19.     .btn {
  20.       cursor: pointer;
  21.       width: 30%;
  22.       margin: 3vw auto;
  23.       display: block;
  24.       font-size: 25px;
  25.       border: none;
  26.       outline: none;
  27.       color: white;
  28.       background-color: red;
  29.       padding: 10px 20px;
  30.     }
  31.  
  32.     .foo {
  33.       display: none;
  34.     }
  35.  
  36.     p {
  37.       width: 70%;
  38.       margin: 50px auto;
  39.       text-align: justify;
  40.       font-size: 2vw;
  41.     }
  42.  
  43.     @media all and (orientation:portrait) {
  44.       .btn {
  45.         width: 90%;
  46.       }
  47.  
  48.       p {
  49.         font-size: 6vw;
  50.         width: 90%;
  51.       }
  52.     }
  53.  
  54.     @media all and (orientation:landscape) and (max-width:768px) {
  55.       .btn {
  56.         width: 90%;
  57.       }
  58.  
  59.       p {
  60.         font-size: 4vw;
  61.         width: 90%;
  62.       }
  63.     }
  64.   </style>
  65. </head>
  66.  
  67. <body>
  68.  
  69.   <p class='foo'>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
  70.  
  71.   <button class='btn'>Javascript auto scroll to Top while display text.</button>
  72.   <p id='p'></p>
  73.  
  74.   <script>
  75.     foo = document.getElementsByClassName('foo')[0];
  76.     btn = document.getElementsByClassName('btn')[0];
  77.     i = 0;
  78.     bam = foo.innerHTML;
  79.     x = bam.length;
  80.     print = true;
  81.     btn.addEventListener('click', function() {
  82.       if (print) {
  83.         clear = setInterval(function() {
  84.           print = false;
  85.           p.innerHTML += bam[i];
  86.           window.scrollBy(0, 100);
  87.           i++;
  88.           if (i == x) {
  89.             clearInterval(clear);
  90.           }
  91.         }, 40);
  92.       }
  93.     });
  94.   </script>
  95. </body>
  96.  
  97. </html>
  98.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!