script นี้ใช้สำหรับเพิ่มความสะดวกให้ผู้เยี่ยมชมเว็บไซต์ โดยจะเพิ่มปุ่มกด scroll up เพื่อใช้เลื่อนหน้าเว็บฯ เพจขึ้นไปยังตำแหน่งบนสุดอย่างรวดเร็ว
ซึ่งตัว code จะตรวจจับการ scroll down ลงมาที่ 300px (กำหนดใน javascript) แล้วจะมีปุ่มปรากฏที่มุมล่างด้านขวาของจอ
เมื่อ user ทำการกดปุ่มดังกล่าว โปรแกรมจะทำการ scroll up ขึ้นไปจนสุดแล้วปุ่มนี้ก็จะเฟดหายไป

HTML

<a href="#0" class="cd-top">Top</a>

CSS

.cd-top {

  display: inline-block;

  height: 50px;

  width: 50px;

  position: fixed;

  bottom: 40px;

  right: 10px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);

  /* image replacement properties */

  overflow: hidden;

  text-indent: 100%;

  white-space: nowrap;

  background:url(../images/ico-top.png) 0 0 no-repeat;

  visibility: hidden;

  opacity: 0;

  -webkit-transition: opacity .3s 0s, visibility 0s .3s;

  -moz-transition: opacity .3s 0s, visibility 0s .3s;

  transition: opacity .3s 0s, visibility 0s .3s;

}

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {

  -webkit-transition: opacity .3s 0s, visibility 0s 0s;

  -moz-transition: opacity .3s 0s, visibility 0s 0s;

  transition: opacity .3s 0s, visibility 0s 0s;

}

.cd-top.cd-is-visible {

  /* the button becomes visible */

  visibility: visible;

  opacity: 1;

}

.cd-top.cd-fade-out {

  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */

  opacity: .8;

}

.no-touch .cd-top:hover {

  background-color: #e86256;

  opacity: 1;

}

Javascript

jQuery(document).ready(function($){

 

        var offset = 300,

        offset_opacity = 1200,

        scroll_top_duration = 700,

 

        $back_to_top = $('.cd-top');

 

        $(window).scroll(function(){

                ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');

 

                if( $(this).scrollTop() > offset_opacity )

                { 

                           $back_to_top.addClass('cd-fade-out');

                }

        });

 

        //smooth scroll to top

       $back_to_top.on('click', function(event){

               event.preventDefault();

               $('body,html').animate({

                      scrollTop: 0 ,

               }, scroll_top_duration);

        });

 

});