☰

Scroll To Top

When user scrolled down of page then it will make easy to get back to top of the page.

  1. // ==UserScript==
  2. // @name        Scroll To Top
  3. // @namespace   Back top top of the document
  4. // @description When user scrolled down of page then it will make easy to get back to top of the page.
  5. // @include     *
  6. // @version     1
  7. // @require		https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  8. // @grant       GM_addStyle
  9. //
  10. // ==/UserScript==
  11. GM_addStyle ("[data-scroll]{height: 50px;width: 200px;font-size: 18px;line-height: 50px;text-transform: uppercase;text-align: center;background-color: rgba(255, 99, 71, 0.4);color: white;cursor: pointer;position: fixed;bottom: 10px;right: 10px;dispaly: none;z-index:999999;}[data-scroll]:hover {background-color: #ff6347;}");
  12. $(function()
  13.  {
  14.   scroll_btn=$("<div />");
  15.   scroll_btn.attr("data-scroll",'0');
  16.   scroll_btn.html("▲Back to Top▲");
  17.   scroll_btn.hide();
  18.   $("body").append(scroll_btn);
  19.   $(window).scroll(function()
  20.   {
  21.     var window_height=$(window).height();
  22.     var scroll_height=$(document).scrollTop();
  23.     if(scroll_height>0)
  24.       {
  25.          scroll_btn.show(100);
  26.       }
  27.     else
  28.       scroll_btn.hide(100);
  29.   });
  30.   scroll_btn.click(function(e)
  31.   {
  32.     e.preventDefault();
  33.     $(window).scrollTop(0);
  34.   });
  35. });