div classによるページ上部に戻る処理について

現在、クリックするとa hrefから新しい写真.htmlを呼び出す所に、ページ上部に戻る処理も加えたいと思っています。
トップページにはボタンを表示して、div id=”header” でボタンの画像に div class=”back” a href=header として、ページ上部に戻る処理をしているのですが、同じように写真へのリンクにそれを追加しようとした所、やはりマヌケな発想だったようで、 a hrefの重複からうまくいきませんでした。
すでに写真にリンクをつけている場合、その写真をクリックしてページ上部へ戻る処理は追加できないのでしょうか？
よろしくお願いします。

質問者からの補足コメント

• 様々な詳しいご回答、本当にありがとうございます！
  現在、パソコンスクールにてホームページを作る授業の最中なので、教材には何度も目を通しているのですが、まだまだ知識として足りない部分があり、不快な思いをさせてしまってすみません。
  今回の質問内容なのですが、現在スクールがお休みで、先生がいないので投稿しました。
  縦長の写真と少量の文言だけをbodyに表示したhtml、「縦長の写真.html」内に、写真をクリックすると、次の縦長の写真.htmlに飛ぶようになっています。しかし、クリックして飛ぶと、次の縦長の写真.htmlのお尻部分がまず表示されてしまうので、飛ぶ際に画面上部に戻る術が知りたかったんです。
  分かりづらい質問ですみません。div idを使用したボタンについても、教材通りに進める意向の先生だったので、そのまま使用していました。画像クリックでも上に行けたら便利かと考えています。すみません

    補足日時：2015/08/02 13:24

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/08/02 09:53

判らない時は仕様書を読むでしょ。

仕様書に書かれていることは聞かない。
--私がこの世界に入ったとき、聞けるのはニュースグループかメーリングリスト・・聞くと「Man!」と帰って来たものです。ソフトのマニュアルを読め!!ということ。
　それは大きな励みになると同時に仕様書を読む癖をつけてもらいました。
仕様書には
12.2 A要素
<!ELEMENT A - - (%inline;)* -(A) -- anchor -->
　と書かれています。http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401 …
「A要素は要素(Element)であり、インライン要素のみ含むことが出きる。ただし-(A)A要素は除く」
　といの一番に書いてある。HTML5ではブロック要素も入れられますが、【インタラクティブな要素は入れられません】
4.5.1 The a element
・・・【中略】・・・
Content model:Transparent, 【but there must be no interactive content descendant.】
http://www.w3.org/TR/2014/REC-html5-20141028/tex …

　うわべだけを、あちこち探して取り繕うより、きちんと基礎から学ばないと時間の無駄です。膨大な時間の浪費と、誤まった沢道に落ちて這い上がるのが大変です。数学や理科を学ぶのと同じで基礎から正道を歩めば、こんな簡単なものはありません。
　一度
HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
　を読んで、どこを調べればよいか程度は頭に入れておくとよいかと

＞div id=”header” でボタンの画像に div class=”back” a href=header として、ページ上部に戻る処理をしているのですが、同じように写真へのリンクにそれを追加しようとした所、やはりマヌケな発想だったようで、 a hrefの重複からうまくいきませんでした。

　divは、あくまで文書構造を補完するためのもので、デザインのためではありません。単純に
　<p><a href="#TOP">ページトップ</a>へ</p>
とでもしておいて、
a[href="#TOP]{
display:block;
width:80px;height:40px;
background-image:url(./images/icon/goBuck.gif);
overflow:hidden;
text-indent:-20em;
}
とか、スプライトを使うともっと華々しくできるでしょう。このサイトのように(^^)

＞同じように写真へのリンクにそれを追加しようとした所、やはりマヌケな発想だったようで、 a hrefの重複からうまくいきませんでした。
　<a href="./images/photo/abc.jpg"><img src="" width="" height="" alt=""></a><a href="#TOP">トップへ</a>
でよい。