実現したいこと
①トップへ戻る画像をクリック
②トップに向けて画面が動き出す
③上に戻るまでの間、画像は半透明になる
この③の部分を実現したいのですがどこにどのような指定をすればいいのかわからず質問させていただきます。
下記、HTML・css・jsです。
HTML
1<div id="top_scroll"> 2 <a href="#" id="page-top1"><img src="https://placehold.jp/50x76.png" alt="TOPへ" /></a> 3</div>
css
1#top_scroll{ 2 position: relative; 3 z-index: 100; 4 margin: 0; 5 padding: 0; 6} 7#page-top1{ 8 display: block; 9 position: fixed; 10 z-index: 9999; 11 bottom: -250px; 12 right: 10px; 13 width: 50px; 14 height: 76px; 15 padding: 0; 16 color: #222; 17 text-align: center; 18 text-decoration: none; 19 transition: 1s; 20 -webkit-transition: 1s; 21} 22#page-top1:hover{ 23 transform: translateY(-10px); 24} 25#top_scroll:hover{ 26 background: #fff; 27}
js
1$(function(){ 2 var pageTop1 = $("#page-top1"); 3 pageTop1.click(function () { 4 $('body, html').animate({ scrollTop: 0 }, 500); 5 return false; 6 }); 7 $(window).scroll(function () { 8 if($(this).scrollTop() >= 200) { 9 pageTop1.css( "bottom", "20px" ); 10 } else { 11 pageTop1.css( "bottom", "-85px" ); 12 } 13 }); 14 });
お分かりになられる方いらっしゃいましたら、お助け下さい。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/31 09:36 編集
2018/10/31 09:45
2018/10/31 09:58
2018/11/01 03:32