Javascript

ページの先頭に戻る

'15.10.22

HTMLに以下を追記

<div class="" id="pageTop">
  <a href="#wrapper" class=""><i class="fas fa-chevron-circle-up fa-fw"></i></a>
</div>

↑Font Awesomeを使用

</body>タグの直前に以下を追記。

<script>
  $(document).ready(function(){
    $("#pagetop").hide();
      $(function () {
      $(window).scroll(function () {
      if ($(this).scrollTop() > 300) {
        $('#pagetop').fadeIn();
        } else {
        $('#pagetop').fadeOut();
        }
      });
    // scroll body to 0px on click
    $('#pagetop a').click(function () {
      $('body,html').animate({
        scrollTop: 0
        }, 800);
      return false;
      });
    });
  });
</script>

CSSに以下を追記。

#pagetop{
    position:fixed;
    right:20px;
    bottom:-60px;
    cursor:pointer;
}

 

(View1307)