topに戻る

topページに戻る、画像
＜head＞＜/head＞内に「jQuery」のタグを設置

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>

<script src="script.js"></script>

ファイルを「script.jp」作り、下記を記載。

<!-- スクロール用 -->
<script>
$(function(){
  var topBtn=$('#pagetop');
  topBtn.hide();
 
  //ボタンの表示設定
  $(window).scroll(function(){
    if($(this).scrollTop()>800){
      //---- 画面を800pxスクロールしたら、ボタンを表示する
      topBtn.fadeIn();
    }else{
      //---- 画面が800pxより上なら、ボタンを表示しない
      topBtn.fadeOut();
    } 
  });
 
  //ボタンをクリックしたら、スクロールして上に戻る
  topBtn.click(function(){
    $('body,html').animate({
    scrollTop: 0},500);
    return false;
  });
});
</script>

htmlの上部に、下記を記載。

```
<a id="top">
```

footerへhtml記載

<div id="pagetop" hidden><img src="画像ファイル名"  ></div><!-- pagetop -->

css記載

#pagetop{
    position:fixed;
    right:10px;        /*ボタン、画像位置*/
    bottom:20px;
    cursor:pointer;
    z-index: 10;
}

#pagetop img {
	width: 140px;    /*ボタン、画像サイズ*/
	height: auto;
}

ＤＥＭＯ
ＤＥＭＯ

topページに戻る、画像