質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

3588閲覧

ページTopでボタンが消えない

innjera

総合スコア132

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/12/12 12:04

jQueryを使用し、ボタンを押すとTopに戻る機能を実装しています。

ページtopではボタンが表示されない様にしたい(スクロールすると、ボタンが出現)としたいのですが、ページTopに表示されてしまいます。
一度スクロールして、上部に戻ると、ページTopに戻っても、ボタンは表示されません。(それはOK)
が、ページをrefreshするとやはり表示されてしまいます。

誤りをご指摘頂けますと助かります。

javascript

1var syncerTimeout = null ; 2 3$( function() 4{ 5 $( window ).scroll( function() 6 { 7 if( syncerTimeout == null ) 8 { 9 syncerTimeout = setTimeout( function(){ 10 var element = $( '#page-top' ) ; 11 var visible = element.is( ':visible' ) ; 12 var now = $( window ).scrollTop() ; 13 var under = $( 'body' ).height() - ( now + $(window).height() ) ; 14 15 if( now > 200 ) 16 { 17 if( !visible ) 18 { 19 element.fadeIn( 'fast' ) ; 20 } 21 } 22 else if( visible ) 23 { 24 element.fadeOut( 'fast' ) ; 25 } 26 syncerTimeout = null ; 27 } , 1000 ) ; 28 } 29 } ) ; 30 $( '#move-page-top' ).click( 31 function() 32 { 33 $( 'html,body' ).animate( {scrollTop:0} , 'slow' ) ; 34 } 35 ) ; 36} ) ; 37

html

1<div id="page-top" class="page-top"> 2 <p> 3 <a id="move-page-top" class="move-page-top"> 4 <i class="fa fa-chevron-up fa" aria-hidden="true" style="color:white;margin-bottom:0.5rem"></i> 5 TOP 6 </a> 7 </p> 8 </div>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

初期値(?)はCSSでdisplay: none;を指定しておくのが一般的だと思いまよ~

css

1#page-top { 2 display: none; 3}

投稿2016/12/12 12:19

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

innjera

2016/12/12 12:28

有難う御座います!うまくいきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問