TOPに戻るアンカーについてです。
スクロールしたら表示され、クリックするとスーッと戻したいのですが、どうしてもできません。申し訳ありません、お力添えいただきたくよろしくお願いします。
HTML
1<head> 2<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 3 <script src="pagetop.js"></script> 4</head> 5<body> 6<p id="pageTop"><a href="#header"><i class="fa fa-chevron-up"></i></a></p> 7</body> 8</html>
CSS
1#pageTop { 2 display: table; 3 position: fixed; 4 bottom: 20px; 5 right: 20px; 6} 7 8 9 10#pageTop i { 11 position: absolute; 12 top: 50%; 13 left: 50%; 14 transform: translate(-50%, -50%); 15} 16 17 18 19#pageTop a { 20 display: block; 21 z-index: 999; 22 padding: 8px 0 0 8px; 23 border-radius: 30px; 24 width: 35px; 25 height: 35px; 26 background-color: #000; 27 color: #fff; 28 font-weight: bold; 29 text-decoration: none; 30 text-align: center; 31} 32 33 34 35#pageTop a:hover { 36 opacity: 0.7; 37}
JavaScript
1 2 3$(function(){ 4var topBtn=$('#pageTop'); 5topBtn.hide(); 6 7 8$(window).scroll(function(){ 9 if($(this).scrollTop()>150){ 10 11 topBtn.fadeIn(); 12 13 }else{ 14 15 topBtn.fadeOut(); 16 17 } 18}); 19 20topBtn.click(function(){ 21 $('body,html').animate({ 22 scrollTop: 0},'slow'); 23 return false; 24 25}); 26 27 28});
回答1件
あなたの回答
tips
プレビュー