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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

1回答

655閲覧

aタグでscrollしたときに、同一ページ内位置の調整について

kinsncn

総合スコア34

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2021/08/28 12:38

編集2021/08/28 12:39

aタグを使って、同一ページ内でのscrollをしたいですが、scrollしたときの位置について教えてください。
下記codeで【ボタンA:クリック⇒ジャンプ先】クリックしたときに、【ジャンプ先】の表示を【ボタンA:クリック⇒ジャンプ先】の元の同じ位置に表示したいですが、いろいろ調べてもよくわからないので、教えてください。

html

1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <link rel="stylesheet" href="style.css"> 8 <title>テスト用</title> 9</head> 10<body> 11 <div class="container"> 12 <div id="test"> 13 メニュー 14 </div> 15 16 <div id="jump"> 17 <a href="#home">ボタンA:クリック⇒ジャンプ先</a> 18 </div> 19 20 <div id="add"> 21 <a name="home">ジャンプ先</a> 22 </div> 23 </div> 24 25</body> 26</html>

css

1* 2{ 3 margin: 0; 4 padding: 0; 5 box-sizing: border-box; 6} 7.container 8{ 9 width: 1000px; 10 margin: 0 auto; 11} 12#test 13{ 14 position: fixed; 15 top: 0; 16 left: 0; 17 text-align: center; 18 font-size: 30px; 19 height: 50px; 20 width: 100%; 21 background-color: chartreuse; 22} 23 24#jump 25{ 26 height: 600px; 27 margin: 50px 0 0 0; 28 background-color: aqua; 29} 30 31#add 32{ 33 height: 600px; 34 background-color: blueviolet; 35} 36コード

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

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

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

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

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

guest

回答1

0

これはページのレイアウトの話ではなくブラウザの挙動の話なので、思い通りにするにはJavaScript等でコントロールする必要があると思います。

投稿2021/08/28 12:46

itagagaki

総合スコア8402

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

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

kinsncn

2021/08/28 13:00

ありがとうございます。やっぱりそうですか? ずっと調べて、いい説明がなかったので、こちらに聞いたんですが。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問