JavaScript？　WEBページの中の要素の中身をスクロールさせたい

よく、jQueryプラグインで、ページを任意の場所までスクロールさせる方法は見かけるのですが、
ページの中のdiv要素の中身を任意の部分にスクロールさせることは可能なのでしょうか。

lang
1<html>
2<head></head>
3<body>
4<a href="#5">ここを押すとスクロール</a>
5<div style="overflow: hidden; width: 100%; height: 600px;">
6    <a name="1">aaaa</a>
7    <a name="2">iiii</a>
8    <a name="3">uuuu</a>
9    <a name="4">eeee</a>
10    <a name="5">oooo</a>
11    <a name="6">kakakaka</a>
12    <a name="7">kikikiki</a>
13    <a name="8">kukukuku</a>
14    <a name="9">kekekeke</a>
15</div>
16</body>
17</html>

このように、1ページの中にリンクと、style="overflow: hidden"を持つdiv要素があり、
div要素の外のリンクを押すと、div要素の中だけをスクロールさせたいのです。

ご存じの方がいらっしゃいましたら、ご教授ください。
よろしくお願いいたします。

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

回答3件

ベストアンサー

こうでしょうか。

lang
1  <a id="btn" href="#5">ここを押すとスクロール</a>
2  <div id="scroll">
3    <a name="1">1</a>
4    <a name="2">2</a>
5    <a name="3">3</a>
6    <a name="4">4</a>
7    <a name="5">5</a>
8    <a name="6">6</a>
9    <a name="7">7</a>
10    <a name="8">8</a>
11    <a name="9">9</a>
12  </div>

lang
1#scroll {
2  position: relative;
3  overflow: auto;
4  height: 600px;
5  margin-top: 5px;
6  padding: 20px;
7  border: 5px solid #f1f1f1;
8}
9#scroll a {
10  display: block;
11  margin-bottom: 500px;
12}
13#scroll:last-child {
14  margin-bottom: 0;
15}

lang
1$(function() {
2  $('#btn').click(function(e) {
3    e.preventDefault();
4    var att = $(this).attr('href');
5    var match = att.match(/\d/);
6    index = match.toString();
7    target = $('#scroll a').eq(index - 1);
8    var tposi = target.position().top;
9    var sposi = $('#scroll').scrollTop();
10    var posi = tposi + sposi;
11
12    $("#scroll").animate({
13      scrollTop: posi - 20
14    }, "fast", "swing");
15
16  });
17});

投稿2015/02/16 05:59

退会済みユーザー

総合スコア0

nnahito

2015/02/20 06:46

これです！！ありがとうございます！助かりました

ceeport

2015/09/18 03:10

btnを1つではなく増やして、すべての<a name="~"></a>に対応させることはできますか? 大幅な改造が必要なのでしょうか?

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

この回答は誤送信です。

投稿2015/02/14 21:31

編集2015/02/14 21:32

nnahito

総合スコア2004

可能です。
少しわかりやすくしたソースを貼っておきます。
また、div要素のoverflowをscrollにするとdiv要素にスクロールバーが表示されます。

ただし、この場合ブラウザのウィンドウサイズがdiv要素より小さい場合に外側もスクロールしてしまいます。

（わかりにくかったら、ごめんなさい）

lang
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5<style type="text/css">
6<!--
7a {
8	padding: 5px;
9}
10div {
11	background: gray;
12	overflow: hidden;
13	/*overflow: scroll;*/
14	width: 100%;
15	height: 600px;
16}
17div a {
18	display: block;
19	color: #fff;
20	padding: 10px 0 200px 10px;
21-->
22</style>
23</head>
24<body>
25<a href="#1">1</a>
26<a href="#2">2</a>
27<a href="#3">3</a>
28<a href="#4">4</a>
29<a href="#5">5</a>
30<a href="#6">6</a>
31<a href="#7">7</a>
32<a href="#8">8</a>
33<a href="#9">9</a>
34<div>
35    <a name="1">aaaa</a>
36    <a name="2">iiii</a>
37    <a name="3">uuuu</a>
38    <a name="4">eeee</a>
39    <a name="5">oooo</a>
40    <a name="6">kakakaka</a>
41    <a name="7">kikikiki</a>
42    <a name="8">kukukuku</a>
43    <a name="9">kekekeke</a>
44</div>
45</body>
46</html>

投稿2015/02/13 05:35

ShowGo

総合スコア7

nnahito

2015/02/14 21:35

ご回答有難うございます。内容が伝わりにくくて申し訳ありません。 <div>要素の外にあるリンク（アンカー名）をクリックすると、 jQueryなどのプラグインの、ページ内スクロール（スムーズスクロール？）で、 <div>要素内をスクロールさせたいのです。対象の要素の中身だけをスクロールすることは可能でしょうか？

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

あなたの回答