HTML, CSS, javascript, PHP

Для реализации такого эффекта нашелся компактный код на JQuery

<script type="text/javascript">
  $(document).ready(function(){
    $(window).scroll(function(){
      var bo = $(this).scrollTop();
      var a = $("#hid").css('opacity')
      //$("#hid").html(bo);
      if ( bo >= 200 && a == 0) {$("#hid").stop().css('display', 'block').animate({'opacity':'1'},500)};
      if ( bo < 200 && a == 1) {$("#hid").stop().animate({'opacity':'0'},500).css('display', 'none')};
    })
  })
</script>

При прокрутке страницы на 200px плавно появляется блок #hid

<div id="hid"><a href="#top">На верх</a></div>

И css код для него:

<style>
  #hid{
    display: none;
    position: fixed;
    right: 25px;
    bottom: 50px;
  }
</style>

А чтобы при клике по стрелке происходил плавный переход в верх страницы, в нашем случае к якорю #top нужно сделать следующее >> Плавная прокрутка страницы с помощью JQuery