ページ内リンクでスクロール内のリンク先までスムーズスクロールさせたい

ページ内リンクでスクロール部分内にあるリンク先までスムーズスクロールさせようとしましたが、スクロール部内ではスクロールせず、windowの一番下までスクロールしてしまいます。

下記試してみました。
どうすればスクロールしながら目的の場所をスクロール内のトップに持ってこれるでしょうか？
大変困っています。よろしくお願いします。

HTML
1<html>
2<head>
3  <title>タイトル</title>
4</head>
5<body>
6<div class="aaa">
7  <a href="#bbb">bbb</a>
8</div>
9<div class="scroll">
10  <p class="ccc">sssssssss</p>
11  <p class="ccc">sssssssss</p>
12  <p class="ccc">sssssssss</p>
13  <p class="ccc">sssssssss</p>
14  <p class="ccc">sssssssss</p>
15  <p class="ccc">sssssssss</p>
16  <p class="ccc">sssssssss</p>
17  <p class="ccc">sssssssss</p>
18  <p class="ccc">sssssssss</p>
19  <p class="ccc">sssssssss</p>
20  <p class="ccc" id="bbb">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
21  <p class="ccc">sssssssss</p><p class="ccc">sssssssss</p><p class="ccc">sssssssss</p><p class="ccc">sssssssss</p><p class="ccc">sssssssss</p><p class="ccc">sssssssss</p><p class="ccc">sssssssss</p><p class="ccc">sssssssss</p><p class="ccc">sssssssss</p>
22</div>
23<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
24</body>
25</html>

css
1.scroll{
2  height:500px;
3  overflow:scroll;
4	background-color: #eee;
5}
6.ccc{
7  height:200px;
8}
9.aaa{
10  height:500px;
11}

javascript
1	$('.aaa').on('click','a[href^="#"]',function(e){
2			e.preventDefault();
3				var speed = 400;
4				var adjust = 75;
5				var href = $(this).attr("href");
6				var target = $(href == "#" || href == "" ? 'html' : href);
7				let targetss = $('.scroll').position();
8				var position = target.offset().top + targetss.top - adjust;
9				$('body,html').animate({
10					scrollTop: position
11				}, speed, 'swing');
12				return false;
13	});

行動規範の内容に同意します

回答3件

自己解決

2段階でスクロールさせる必要がありました。
うまいこと動いてくれました。

javascript
1$('.aaa').on('click', 'a[href^="#"]', function (e) {
2  e.preventDefault();
3  var speed = 400;
4  var adjust = 0;
5  var href = $(this).attr("href");
6  var target = $(href == "#" || href == "" ? 'html' : href);
7	$('.scroll').animate({ scrollTop: 0},0);
8  var targetss = $('.scroll').position();
9  var position = target.position().top - adjust;
10  $('body,html').animate({
11    scrollTop: targetss.top
12  }, speed, 'swing');
13	$('.scroll').animate({
14    scrollTop: position
15  }, speed, 'swing');
16  return false;
17});

投稿2020/04/15 05:42

Overrun

総合スコア18

本来「HTML」というのは<html>タグから始まり、以下のような構造をしています。

html
1<html>
2    <head>
3        <title>タイトル</title>
4    </head>
5    <body>
6        <div id="app">中身</div>
7    </body>
8</html>

つまり<div>などの要素のみではHTMLとは呼びません。まずは全体を<body>の中に入れましょう。

次にJavaScriptの方ですが、おそらく間違いのないコードなのですが、このままでは動きません。なぜかと言うとブラウザ標準の関数（機能）を使っていないためです。この関数を集めたものをライブラリと呼び、ライブラリを読み込まないと関数を使うことはできません。ここで使われているライブラリは「jQuery」と呼ばれるものです。これを外部から読み込む必要があります。「jQuery 使い方」や「jQuery 読み込み方」などで調べると出てくるかと思いますが、具体的には<body>タグの中に<script src="hoge">タグを使ってjQueryを読み込ませる動作が必要になります。

投稿2020/04/14 13:02

A_kirisaki

総合スコア2853

Overrun

2020/04/14 13:15

基本構文をすっ飛ばした質問失礼しました。 jqueryを読み込んだ上での質問でした。基本構文を追加しましたのでよろしくお願いします。

A_kirisaki

2020/04/14 13:32

jQueryは`<body>`の先頭で読み込みましょう。自分の書いたスクリプトは後側で読みましょう。ブラウザで動くJavaScriptの性質上、HTMLの先頭から読み込まれていくので、jQueryが読み込まれないまま自分のスクリプトを動かすとjQueryの関数がない状態から実行してしまうことになります。それを避けるために外部ライブラリを読み込む順番には気をつけるようにしましょう

Overrun

2020/04/15 01:00

はい、ありがとうございます。

行動規範の内容に同意します

pewvwntDefault()が実行されているかと思いますが、これは名前の通りデフォルトの動作を邪魔する働きをします。そしてこのコードではどの部分の働きを邪魔しているでしょうか。$('.aaa')を見ればわかります。そして.aaaが示しているのはHTMLを見ると<div>だけですよね。ということは中の<a>タグの動作はデフォルトの働きが残っています。<a>: アンカー要素 - HTML: HyperText Markup Language | MDNの「同じページの要素へのリンク」を読むとわかりますが、デフォルトでは#の付いたリンクは同じページへのジャンプになります。この働きを邪魔すればよいのですから、preventDefault()をする対象を変えてやれば……。ということになります。

投稿2020/04/14 11:32

A_kirisaki

総合スコア2853