スクロールする特定範囲内の最下部に移動（最下部を表示）したい

###特定範囲内の移動したい
body以下に#scrollareaを設けてその中にメッセージを表示しています。 #scrollareaは縦サイズを指定しています。通常であればこのままだとメッセージ上部からひょうじされますが、この#scrollareaの最下部を表示したいです。 jquery scrollTop()で試しましたが最下部に移動できません。
location

htmlの構造は以下

html
1<body>
2<div class="container">
3<div id="scrollarea" style="height:100px; oeverflow:scroll">
4メッセージ、メッセージ.....<br>
5メッセージ、メッセージ.....<br>
6メッセージ、メッセージ.....<br>
7メッセージ、メッセージ.....<br>
8メッセージ、メッセージ.....<br>
9メッセージ、メッセージ.....<br>
10最後のメッセージ、メッセージ.....<br>
11</div>
12</div>
13</body>
14

手動ではなくjavascriptから#scrollareaの最下部を表示させる（移動させる？）方法を教えてほしいです。
上記コードの場合、「最後のメッセージ、メッセージ.....」を手動でスクロールさせるのではなく、javascript,jqueryにて制御して表示させたい。

kei344

2016/11/21 08:35

ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。

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

回答2件

html
1<html>
2<head>
3</head>
4<body>
5<div class="container">
6<div id="scrollarea" style="height:100px; overflow:scroll;">
7<p>メッセージ、メッセージ.....<br>
8メッセージ、メッセージ.....<br>
9メッセージ、メッセージ.....<br>
10メッセージ、メッセージ.....<br>
11メッセージ、メッセージ.....<br>
12メッセージ、メッセージ.....<br>
13メッセージ、メッセージ.....<br>
14メッセージ、メッセージ.....<br>
15メッセージ、メッセージ.....<br>
16最後のメッセージ、メッセージ.....</p>
17</div>
18</div>
19<script src='//code.jquery.com/jquery-2.1.3.min.js'></script>
20<script>
21$(document).ready(function(){
22  var speed = 400;
23  var ojheight = $('#scrollarea p').height();
24  $('#scrollarea').animate({scrollTop:ojheight}, speed, 'swing');
25});
26</script>
27</body>

こんな感じでいかがでしょう？

投稿2016/11/21 08:33

編集2016/11/21 08:34

takepieee

総合スコア686

takumaro_web

2016/11/21 08:41

<p>（要素）で囲むのありですね！！

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

ベストアンサー

##クリックして移動したい場合

■ js

javascript
1$("a[href^='#']").click(function(){
2    var $box = $($(this).data("box"));
3    var $tareget = $($(this).attr("href"));
4    var dist = $tareget.position().top - $box.position().top;
5    $box.stop().animate({
6      scrollTop: $box.scrollTop() + dist
7    });
8    return false;
9});

■ html

html
1<div class="container">
2<p><a href="#last-msg" data-box=".box">最下部</a></p>
3<div class="box" id="scrollarea" style="height:100px; overflow:scroll">
4メッセージ、メッセージ.....<br>
5メッセージ、メッセージ.....<br>
6メッセージ、メッセージ.....<br>
7メッセージ、メッセージ.....<br>
8メッセージ、メッセージ.....<br>
9メッセージ、メッセージ.....<br>
10メッセージ、メッセージ.....<br>
11メッセージ、メッセージ.....<br>
12メッセージ、メッセージ.....<br>
13メッセージ、メッセージ.....<br>
14<span id="last-msg">最後のメッセージ、メッセージ.....</span>
15</div>
16</div>
17

##リロード時に自動で最下部へ

■ js

javascript
1  var $box = $($(".link").data("box"));
2  var $tareget = $($(".link").attr("href"));
3  var dist = $tareget.position().top - $box.position().top;
4  $box.stop().animate({
5    scrollTop: $box.scrollTop() + dist
6  });

■ html

html
1<div class="container">
2<p><a href="#last-msg" data-box=".box" class="link" >最下部</a></p>
3<div class="box" id="scrollarea" style="height:100px; overflow:scroll">
4メッセージ、メッセージ.....<br>
5メッセージ、メッセージ.....<br>
6メッセージ、メッセージ.....<br>
7メッセージ、メッセージ.....<br>
8メッセージ、メッセージ.....<br>
9メッセージ、メッセージ.....<br>
10メッセージ、メッセージ.....<br>
11メッセージ、メッセージ.....<br>
12メッセージ、メッセージ.....<br>
13メッセージ、メッセージ.....<br>
14<span id="last-msg">最後のメッセージ、メッセージ.....</span>
15</div>
16</div>