初心者です。お手柔らかによろしくお願いします。
前提・実現したいこと
webページによくある、クリックするとページのトップに戻るボタンを作成中です
発生している問題・エラーメッセージ
html上でjavascriptのコードを入れると画面上でボタンが消えてしまいます。入れる前はボタンのクリックでトップまで戻れますが、javascriptで行っているスクロールしてからのボタンが出現したり、ゆっくりボタンが戻ることはないです。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <title>MyPortfolio</title> 7 <link rel="icon" href="image/favicon .ico" /> 8 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"> 9 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"> 10 <link rel="stylesheet" href="MyPortfolio.css"> 11 <link rel="stylesheet" href="fixed.css"> 12 <link rel="stylesheet" href="flickity.css"> 13 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> 14 15<!-- ページトップボタン --> 16 17<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css"> 18<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 19</head> 20<body> 21<div id="page_top"><a href="#"></a></div> 22 23 24 <!-- スライダーJS --> 25 <script type="text/javascript" src="flickity.pkgd.min.js"></script> 26 27 <!--ページトップ --> 28 <script type="text/javascript" src="pagetop.js"></script> 29 30 <!-- bootstrap JQuery --> 31 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> 32<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 33<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script> 34 35</body> 36</html>
javascript
1jQuery(function() { 2 var pagetop = $('#page_top'); 3 pagetop.hide(); 4 $(window).scroll(function () { 5 if ($(this).scrollTop() > 100) { 6 pagetop.fadeIn(); 7 } else { 8 pagetop.fadeOut(); 9 } 10 }); 11 pagetop.click(function () { 12 $('body,html').animate({ 13 scrollTop: 0 14 }, 1000); // 15 return false; 16 }); 17});
css
1#page_top{ 2 width: 50px; 3 height: 50px; 4 position: fixed; 5 right: 0; 6 bottom: 50px; 7 background: #3f98ef; 8 opacity: 0.6; 9 border-radius: 50%; 10 display: block !important; 11} 12 13#page_top a{ 14 position: relative; 15 display: block; 16 width: 50px; 17 height: 50px; 18 text-decoration: none; 19} 20#page_top a::before{ 21 font-family: 'Font Awesome 5 Free'; 22 font-weight: 900; 23 content: '\f102'; 24 font-size: 25px; 25 color: #fff; 26 position: absolute; 27 width: 25px; 28 height: 25px; 29 top: -5px; 30 bottom: 0; 31 right: 0; 32 left: 0; 33 margin: auto; 34 text-align: center; 35}
試したこと
スペルチェックなど行いましたが、変わりません。
html内のコードの記載位置など変更しましたが変わりませんでした。
補足情報(FW/ツールのバージョンなど)
上記コードは関係ありそうな部分のみ記載してます。
他にもコードありますが、長くなってしまうので割愛しました。
説明不足かもしれませんが、必要であれば情報追加します。宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー