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コード
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/08/28 13:00