스크롤 버튼

개요

상하 스크롤 버튼

<style>
html {
  height: 150%;
  background: linear-gradient(red, yellow, green);
}
.nav-control {
  position: fixed;
  margin: 0; padding: 0; right: 0; bottom: 0;
  list-style-type: none;
  z-index: 9000;
}
.nav-control li:first-child {
  border-top-left-radius: 9px;
  border-right:1px solid gray;
}
.nav-control li {
  background: #456;
  opacity: .8;
  float: left;
  padding: 8px 16px;
  font-size: 20px;
  color: #fff;
  cursor: pointer;
}
</style>

<ul class="nav-control">
  <li id="btn-top">▲</li>
  <li id="btn-bottom">▼</li>
</ul>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$("#btn-top").click(function() {
	$("html, body").animate({ scrollTop:0 }, 'fast');
});
$("#btn-bottom").click(function() {
	$("html, body").animate({ scrollTop: $(document).height()-$(window).height() }, 'fast');
});
</script>