jQueryでページの「トップに戻る」ボタンを実装。>WordPressカスタマイズjQueryでページの「トップに戻る」ボタンを実装。2015/05/03@Mori2ndです。最近jQueryを利用していろいろカスタマイズするのに凝ってます。今回はスクロールに応じてフェードイン・フェードアウトして出現する、ページの「トップに戻る」ボタンをPC向けサイトに実装してみました!スポンサードリンクページの「トップに戻る」ボタンでやりたいことページの「トップに戻る」ボタンを実装するにあたってやりたかったことは以下の3つ。スクロールに応じてフェードイン・フェードアウトする。「トップに戻る」ボタンを実行した後もURLが変わらない。WordPress用のプラグインはなるべく使わない。この条件で調べていたところドンピシャの記事がみつかりました。先ほどの記事を参考にしてさっそく実装です。jQueryのファイルを読み込む最初にjQueryを利用するためのファイルを読み込みます。こちらはGoogleAPIからの例。続いてjQueryでの処理部分です。ここでは「ボタンを表示するタイミング」と「ボタンを押してからトップに戻るまでのスクロール速度」を指定しています。false;});});</script>解説がわかりやすかったので、自分のブログに合わせた設定も簡単でした。最後は「トップに戻る」ボタンを設置するための記述です。href="#header">トップに<br>戻る</a></div>このボタンをクリックするとスクロールしてトップに戻るようになります。解説すると「#header」がトップの場所になっていて、ここに移動するイメージですね。(利用しているテーマに合わせてご指定ください。)やり方によってはここで指定している「#header」がURLの最後に付く場合があります。例)https://delightmode.com/#headerしかし、ここで実装した方法だとURLが変更されないようですね。シェアしてもらったときなど、場合によってURLが変わるのは嫌ですからね。CSSでデザインをカスタマイズボタンが設置できたので、デザインをカスタマイズしました。参考にこのブログでの内容を書いておきます。ボタン部分の角を丸くして、カーソルが来た場合に色を変えています。それから、z-indexでフッターと重なったときの配置を調整しました。#FFFFFF;}▼左側が通常。右側がカーソルが来た時。CSSはそれほど詳しいわけではないので、不要な部分もあるかもしれません。実装する場合は必要に合わせて調整してみてください!おわりにりくまろぐさんの記事がわかりやすかったので、すぐに実装できました。ありがとうございます!ページの「トップに戻る」ボタンがあると記事を読んだり、探したりがやりやすくなりそうだと思ったので導入してみたんですが、自分でブログの内容を確認しやすくなったのが一番よかったかも(笑)@Mori2ndでした。iTunesの暗号化バックアップから復元すればデータ移行が楽にできます機種変更時に最適なiPhoneのバックアップ方法をご紹介しています。iCloudバックアップではなく、iTunesの暗号化バックアップから復元することでスムーズにデータ移行できます。各アプリのIDやパスワードも引き継ぐにはこの方法がおすすめですよ。詳しい手順も解説していますので、ぜひ参考にしてみてくださいね。2iPhone・iPadのAirDropでデータの受け渡しが便利!写真・動画・PDFなどのコンテンツを送受信する方法と注意点iPhone・iPadなどApple製品同士で使えるAirDropはデータの受け渡しにとても便利な機能です。写真・動画・PDFなどのコンテンツを送受信する方法と利用する際の注意点も合わせてご紹介します。PA-Y12」を購入してみました。Delivery)対応でワット数の異なるパソコンにもパワフル充電。追加のUSB-Aポート2つでスマホやタブレットの充電にも大活躍。使ってみた感想をご紹介します。大容量HDDが持ち運びできる!パソコン内のデータ整理とバックアップ目的でポータブルハードディスクを購入してみました。Portable」です。大容量なのに小さくて収納や持ち運びが楽です。商品の特徴や使ってみた口コミもご紹介します。5LGウルトラワイドモニター「29UM69G-B」の口コミレビュー。11インチも大画面で超快適な作業環境を実現できた!快適なパソコン作業環境を求めて21:9ウルトラワイドモニターを購入してみました。それがLGエレクトロ二クスの「29UM69G-B」29インチです。1枚のディスプレイでスクエアタイプのモニター2枚分の広さを実現。ウィンドウを並べての作業が捗りますね!商品の特徴や使ってみた感想をご紹介します。jQueryauthor関連記事WordPressカスタマイズスクロールするとページ遷移無しで次ページを自動読み込みするjQueryプラグイン「jQuery.autopager」を導入[WordPress]@Mori2ndです。Generator」でファビコンを作成してみました!@Mori2ndです。先日、ブログ名を変更したので、それに合わせてファビコンを作成してみました。Order」カテゴリーが増えてくると一覧などに表示される順番を変更したくなってくるんですが、WordPressの標準機能では出来ないんですよね。優先順位が高いカテゴリーを上の方にもっていきたいのです。そんなわけで方法を探していたら、ドラッグ&ドロップの簡単操作でカテゴリーの並び替えができるプラグインがありました。WordPressカスタマイズ[Mac]GUIでhosts編集できる「Hosts」が簡単操作で便利!ブログサーバー移転時の動作確認に使える!@Mori2ndです。ブログで利用しているサーバーですが、今回いろいろと検討した結果、移転することにしました。@Mori2ndです。...PREV【感謝】LiovenさんにブログのiPhoneホーム画面アイコンとFacebookページ用画像を作成していただきました!NEXTMac版Firefoxをインストール。PA-Y10」レビュー!最大46WのUSB-Cと10.5WのUSB-Aポートを兼ね備え、出張や旅行にも活躍してます!プロフィールディライトモードへようこそ。管理人のモリダイです。このサイトでは「iPhone&格安SIMで楽しむ!」をキャッチフレーズに、格安SIM・iPhone・スマホ・PC・Macの話題を中心にお届けしています。