Topics

How To Create a Scroll Back To Top Button

Rumman Ansari 2022-12-06 Developer web development > Back To Top Button 311 Share

How To Create a Scroll To Top Button

Live Preview

Step 1) Add HTML:

Create a button that will take the user to the top of the page when clicked on:

Example

<span class="pln">
</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">topFunction</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myBtn"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Go to top"</span><span class="tag">&gt;</span><span class="pln">Top</span><span class="tag">&lt;/button&gt;</span>

Step 2) Add CSS:

Style the button:

<span class="pln">
</span><span class="tag">&lt;style&gt;</span><span class="pln">
</span><span class="com">#myBtn {</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Hidden by default */</span><span class="pln">
  position</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">fixed</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Fixed/sticky position */</span><span class="pln">
  bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Place the button at the bottom of the page */</span><span class="pln">
  right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">30px</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Place the button 30px from the right */</span><span class="pln">
  z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="pln"> </span><span class="lit">99</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Make sure it does not overlap */</span><span class="pln">
  border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Remove borders */</span><span class="pln">
  outline</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Remove outline */</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Set a background color */</span><span class="pln">
  color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Text color */</span><span class="pln">
  cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Add a mouse pointer on hover */</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Some padding */</span><span class="pln">
  border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">10px</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Rounded corners */</span><span class="pln">
  font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln"> </span><span class="com">/* Increase font size */</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">#myBtn:hover {</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#555; /* Add a dark-grey background on hover */</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag">&lt;/style&gt;</span>

Step 3) Add JavaScript:

<span class="pln">
</span><span class="tag">&lt;script&gt;</span><span class="pln">
</span><span class="com">// Get the button:</span><span class="pln">
</span><span class="kwd">let</span><span class="pln"> mybutton </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"myBtn"</span><span class="pun">);</span><span class="pln">

</span><span class="com">// When the user scrolls down 20px from the top of the document, show the button</span><span class="pln">
window</span><span class="pun">.</span><span class="pln">onscroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">scrollFunction</span><span class="pun">()};</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> scrollFunction</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">20</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">20</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    mybutton</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">"block"</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    mybutton</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">"none"</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// When the user clicks on the button, scroll to the top of the document</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> topFunction</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="com">// For Safari</span><span class="pln">
  document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln"> </span><span class="com">// For Chrome, Firefox, IE and Opera</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag">&lt;/script&gt;</span>

All Code in one place

<span class="pln">
</span><span class="dec">&lt;!DOCTYPE html&gt;</span><span class="pln">
</span><span class="tag">&lt;html&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln">
</span><span class="tag">&lt;meta</span><span class="pln"> </span><span class="atn">name</span><span class="pun">=</span><span class="atv">"viewport"</span><span class="pln"> </span><span class="atn">content</span><span class="pun">=</span><span class="atv">"width=device-width, initial-scale=1"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;style&gt;</span><span class="pln">
body </span><span class="pun">{</span><span class="pln">
  font</span><span class="pun">-</span><span class="pln">family</span><span class="pun">:</span><span class="pln"> </span><span class="typ">Arial</span><span class="pun">,</span><span class="pln"> </span><span class="typ">Helvetica</span><span class="pun">,</span><span class="pln"> sans</span><span class="pun">-</span><span class="pln">serif</span><span class="pun">;</span><span class="pln">
  font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">#myBtn {</span><span class="pln">
  display</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
  position</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">fixed</span><span class="pun">;</span><span class="pln">
  bottom</span><span class="pun">:</span><span class="pln"> </span><span class="lit">20px</span><span class="pun">;</span><span class="pln">
  right</span><span class="pun">:</span><span class="pln"> </span><span class="lit">30px</span><span class="pun">;</span><span class="pln">
  z</span><span class="pun">-</span><span class="pln">index</span><span class="pun">:</span><span class="pln"> </span><span class="lit">99</span><span class="pun">;</span><span class="pln">
  font</span><span class="pun">-</span><span class="pln">size</span><span class="pun">:</span><span class="pln"> </span><span class="lit">18px</span><span class="pun">;</span><span class="pln">
  border</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
  outline</span><span class="pun">:</span><span class="pln"> none</span><span class="pun">;</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> red</span><span class="pun">;</span><span class="pln">
  color</span><span class="pun">:</span><span class="pln"> white</span><span class="pun">;</span><span class="pln">
  cursor</span><span class="pun">:</span><span class="pln"> pointer</span><span class="pun">;</span><span class="pln">
  padding</span><span class="pun">:</span><span class="pln"> </span><span class="lit">15px</span><span class="pun">;</span><span class="pln">
  border</span><span class="pun">-</span><span class="pln">radius</span><span class="pun">:</span><span class="pln"> </span><span class="lit">4px</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">#myBtn:hover {</span><span class="pln">
  background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln"> </span><span class="com">#555;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag">&lt;/style&gt;</span><span class="pln">
</span><span class="tag">&lt;/head&gt;</span><span class="pln">
</span><span class="tag">&lt;body&gt;</span><span class="pln">

</span><span class="tag">&lt;button</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">topFunction</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">id</span><span class="pun">=</span><span class="atv">"myBtn"</span><span class="pln"> </span><span class="atn">title</span><span class="pun">=</span><span class="atv">"Go to top"</span><span class="tag">&gt;</span><span class="pln">Top</span><span class="tag">&lt;/button&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">black</span><span class="pun">;</span><span class="pln">color</span><span class="pun">:</span><span class="pln">white</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">30px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">Scroll Down</span><span class="tag">&lt;/div&gt;</span><span class="pln">
</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">style</span><span class="pun">=</span><span class="atv">"</span><span class="pln">background</span><span class="pun">-</span><span class="pln">color</span><span class="pun">:</span><span class="pln">lightgrey</span><span class="pun">;</span><span class="pln">padding</span><span class="pun">:</span><span class="lit">30px</span><span class="pln"> </span><span class="lit">30px</span><span class="pln"> </span><span class="lit">2500px</span><span class="atv">"</span><span class="tag">&gt;</span><span class="pln">This example demonstrates how to create a "scroll to top" button that becomes visible 
  </span><span class="tag">&lt;strong&gt;</span><span class="pln">when the user starts to scroll the page</span><span class="tag">&lt;/strong&gt;</span><span class="pln">.</span><span class="tag">&lt;/div&gt;</span><span class="pln">

</span><span class="tag">&lt;script&gt;</span><span class="pln">
</span><span class="com">// Get the button</span><span class="pln">
</span><span class="kwd">let</span><span class="pln"> mybutton </span><span class="pun">=</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">getElementById</span><span class="pun">(</span><span class="str">"myBtn"</span><span class="pun">);</span><span class="pln">

</span><span class="com">// When the user scrolls down 20px from the top of the document, show the button</span><span class="pln">
window</span><span class="pun">.</span><span class="pln">onscroll </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">function</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">scrollFunction</span><span class="pun">()};</span><span class="pln">

</span><span class="kwd">function</span><span class="pln"> scrollFunction</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="pln">document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">20</span><span class="pln"> </span><span class="pun">||</span><span class="pln"> document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">&gt;</span><span class="pln"> </span><span class="lit">20</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    mybutton</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">"block"</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    mybutton</span><span class="pun">.</span><span class="pln">style</span><span class="pun">.</span><span class="pln">display </span><span class="pun">=</span><span class="pln"> </span><span class="str">"none"</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span><span class="pln">

</span><span class="com">// When the user clicks on the button, scroll to the top of the document</span><span class="pln">
</span><span class="kwd">function</span><span class="pln"> topFunction</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  document</span><span class="pun">.</span><span class="pln">body</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
  document</span><span class="pun">.</span><span class="pln">documentElement</span><span class="pun">.</span><span class="pln">scrollTop </span><span class="pun">=</span><span class="pln"> </span><span class="lit">0</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span><span class="pln">
</span><span class="tag">&lt;/script&gt;</span><span class="pln">

</span><span class="tag">&lt;/body&gt;</span><span class="pln">
</span><span class="tag">&lt;/html&gt;</span><span class="pln">
</span>

Share this Post: