Snippet · Mecha CMS

Code snippet collection for developers.

Fixed Smooth Scroll to Top Link

Author: Taufik Nurrohman · 53 Views

Tweet

Make scroll to top link becomes sticky.

Requires scroll plugin.

Add this just before the </body> tag:

<a class="js:scroll to:top" href="#">Top</a>

Then add this just before the </head> tag:

<style>
.js\:scroll.to\:top {
  font:normal normal 0/0 a;
  text-shadow:none;
  position:fixed;
  bottom:20px;
  right:20px;
  z-index:9999;
  width:30px;
  height:30px;
  background:black;
  box-shadow:0 1px 5px rgba(0,0,0,.4);
}
.js\:scroll.to\:top:hover {background:#f00}
.js\:scroll.to\:top:before {
  content:"";
  width:10px;
  height:10px;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  position:absolute;
  top:12px;
  left:10px;
  -webkit-transform:rotate(45deg);
  -moz-transform:rotate(45deg);
  transform:rotate(45deg);
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
</style>

0 Comments

No comments yet.