위로 가는 버튼

화면에 떠 다니는 버튼을 클릭하면 페이지의 가장 위로 이동된다.

처음에는 CSS만으로 적용해서 사용을 했는데 클릭시 화면이 그냥, 막, 순신간에 위로 이동되어 버려 재미?가 없어 제이쿼리_jQuery 를 함께 적용해서 부드럽게 화면이 바뀌면서 위로 올라가는 모습으로 바꾸었다.

 

제 자리에 떠 있는 버튼

오른쪽에 있는 위쪽 화살표의 버튼을 클릭!

 

 

 

HTML

</s_t3> <!-- 위로 가는 버튼 --> <div id="top"><a href="#"><i class="fa fa-arrow-up"></i></a></div> <script> $('#top').click(function(){ $('html, body').animate({scrollTop:0}, 'slow'); }); </script><!-- // 위로 가는 버튼 --> </body> </html>

 

 

CSS

/* 위로 가는 버튼 */ #top a { position:fixed; bottom:5px; right:15px; z-index:5; font-size:30px; color:#fff; text-shadow:rgba(0, 0, 0, 0.3) 1px 1px 2px, rgba(0, 0, 0, 0.3) 0 0 10px;" }