Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

HTML コーダー

webページにトップへ戻る機能をつける簡単な方法「2行書けばできます」

投稿日:

Pocket

うも、チャーさんです。

 

あなたはwebページにトップへ戻る機能を、

つけたいと思っていませんか?

 

この記事ではトップへ戻るを作る方法を、

紹介してます。

 

 

ちなみにとても簡単にできまして、2行かけば、

トップへ戻るはできます。

 

なので、あなたがwebページ上でトップへ戻るを、

つけたいと思っているのならば、このまま下にスクロールし、

読んでみてください。

 

 

スポンサードサーチ

webページにトップへ戻る機能をつける方法

 

それでは、早速結論です。

 

webページにトップへ戻るを実装するには、

 

  1. タグにid名をつけて、
  2. そしてアンカータグのhrefの飛び先に、先ほどつけたのと同じid名を書くだけです。

 

こうするだけで、ページのtopへと、

戻ってくれます。

 

 

ちなみに上記だけではイメージしづらいかと、

思いますのでコードの具体例を用意しますと、

以下の感じです。

 

<p id=”top”>ここがTOPですよ</p>

・・・・

・・・・

・・・・

<a href=”#top”>TOPへ戻る</a>

 

 

こう書いたとすると、

aタグのTOPへ戻るボタンをクリックすると、

idでtopとついてる部分(pタグのとこ)に移動してくれます。

 

なので、すごく簡単です。

 

 

1つ見落としやすい点としては、

aタグのhrefの飛び先には#をidの前につけるのを、

忘れないようにしましょう。

 

で、余談ですが、トップへ戻るの機能が作れたら、

aタグにcssでデザインをつけてやるだけで、

トップヘ戻るボタンも作れます。

 

 

スポンサードサーチ

webページにトップへ戻る機能をつける手順

 

さてここからは簡単ですが、

やり方の手順を説明します。

 

 

飛ばし先を決めましょう

 

まずは、webページの中で、

トップにあたる部分でここに飛ばしたい、

とあなたが思う場所を決めましょう。

 

ちなみに特に思うとこがなければ、

だいたいのケースではwebページの、

一番上になると思います。

 

記事の始まりの部分とかですね。

 

 

次にid名をつけましょう

 

で次に、トップを決めたら、

htmlでそのトップにあたる部分に、

id名をつけましょう。

 

先ほどもお話ししましたが、

このid名をつけた所に、リンクをクリックすると、

戻ってくる仕組みなので、id名を忘れずつけましょう。

 

 

具体例としては、

 

<div id=”id名”>記述記述</div>

 

みたいな感じですね。

 

 

トップへ戻るを表示する位置を決めましょう

 

で次に、トップへ戻るボタンをおく位置を決めましょう。

 

例えが画面の右下に設置しておけば、

そこをクリックするとすぐにトップに戻るので、

便利でしょう。

 

また記事内のどこかに挟んでおくのも、

置き方としては1つ例でしょう。

 

 

ということで、あなたが表示させたいな、

と思う場所を決めておきましょう。

 

 

#id名をaタグに書きましょう

 

次に場所を決めたら、

アンカータグを書いて、さっき書いたid名を、

#に続けて書きましょう。

 

例としては、

 

<a href=”#id”>トップへ戻る</a>

みたいな感じですね。

 

 

このとき違うid名をかいたり、書き間違えたりすると、

ちゃんと機能しないので、気をつけましょう。

 

で次に、かけたらファイルを再読み込みして、

今度はブラウザ上でちゃんと動いてるか、

チェックしましょう。

 

動いてたらOKです。

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

webページでトップへ戻るを実装する方法ですが、

id名を戻りたい場所につけて、

アンカータグのhrefの先に同じid名をつけましょう。

 

 

そうすると、aタグの要素内をクリックすると、

トップへ戻るので、やってみてください。

 

 

さてそれでは、トップへ戻るの作り方が、

わかったと思いますので、あなた自身でも、

やってみましょう。

 

まずは、練習ということで、

どこでもいいので、適当なタグにid名をつけましょう。

 

 

で次に、アンカータグにさっきつけたのと、

同じid名をhrefの後に#をつけて書きましょう。

 

すると飛んでくれますよ。

 

 

それでは記事を読んでもらって、ありがとうございました。

 

チャーさん

-HTML, コーダー

スポンサードサーチ

関連記事

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

javascriptをhtml内で使う方法「完全初心者向け」

どうもチャーさん(@chaa___san)です。   あなたはjavascriptをhtmlで使えないのか? と疑問に思っていませんか?   結論からいうと使えます。   …

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

htmlのテーブルを結合させたい場合は読んでください。

  どうも、チャーさんです。 あなたは、htmlで作るテーブルのセルを、 結合させたい、くっつけたいと思っていませんか?   この記事では、htmlのテーブルのセルを、 結合させる …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

htmlで改行をする方法(3秒で習得できます)

  どうも、チャーさんです。   あなたはhtmlを勉強していて、どうすれば 改行できるのか?と悩んでいませんか。   また色々タグを覚えて、プログラミングを上達させたい …

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

ファビコンの作り方「自作したい人向け」

どうも、チャーさんです。   あなたはあなたのサイト用に、 ファビコンを作りたい。 そう思ってませんか?   この記事ではファビコンの作り方を、 紹介してます。(自作方法を) &n …

no image

htmlの画像の階層について詳しく説明(知らないと画像表示で困ります)

html 画像 階層   どうも、チャーさんです。   あなたはhtmlファイルで画像を表示したいのに、 できない。と悩んでいませんか?   実は画像ファイルが表示できな …

no image

グーグルマップ埋め込みをする簡単3ステップを紹介

どうも、チャーさんです。   あなたは、グーグルマップの埋め込みは、 どうやってやればいいのか? と疑問を持っていませんか。   この記事では、グーグルマップの埋め込みの、 方法を …

no image

htmlでリンクを画像につける方法「速攻でできます」

どうも、チャーさんです。   あなたは、htmlでリンクを画像につける方法を、 探していますか?   この記事では、画像にリンクをつける方法を 話しています。   &nb …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。