アコーディオンの閉じるボタンを押した際、タイトル上部にスムーススクロールで移動させたい

Question

ページ内に「さらに読む」のアコーディオンを設置し、クリックで開閉を操作しているのですが、アコーディオンを閉じる際にタイトルの上部にスムーススクロールで戻るような動きをつけたいと思っています。　色々試行錯誤してみたのですが、記述方法がわからず苦戦しています。　お知恵お貸しいただけましたら幸いです。

▼▼▼HTMLはこうなっている▼▼▼▼

<div style="margin:60px 0">余白用</div>
<section  class="story inner" id="anc1">
<h2 class="sec-ttl">STORY</h2>
<div class="story__desc">
<div class="story__txt">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキテキストテキストテキストテキストテキ
<p class="story-read-bg story-read-ps"><span class="story-read">さらに見る</span></p>
</div>
</div>
</section>
<div style="margin:500px 0">余白用</div>
<style>
	.story{width:400px;margin:0 auto;}
.story__desc{
	border: 4px solid #000;
	padding: 40px 7% 30px;
  margin: 0 auto;
  position: relative;
	height: 150px;
	overflow: hidden;
}
.story__desc.more{
	height: auto;
}
.story-read-bg{
	background: rgba(0, 0, 0, 0) linear-gradient(180deg, rgba(255, 255, 255, 0.5), white) repeat scroll 0 0;
	text-align: center;
}
.story-read-ps{
	width: 100%;
	height: 70px;
	position: absolute;
	bottom: 0px;
	left: 0;
}
.story-read img{
	width: 100px;
}
.story-read img:hover{
	cursor: pointer;
}
.btn{
	text-align: center;
	border: 3px solid #000;
	width: 120px;
	margin: 40px auto 0;
}
.btn a{
	display: block;
	padding: 10px 0px 8px;
	font-weight: bold;
}
.story-read{
	background:red;
	padding:10px;
	color:#fff;
	font-weight: bold;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$( function() {
    $( '.story__desc' ).each( function() {
        var height = $( this ).find( '.story__txt' ).height();
        $( ".story-read" ).on( 'click', function() {
            if ( $( this ).hasClass( 'active' ) ) {
                $( '.story__desc' ).stop().animate( { 'height': '150px' }, 'slow' );
            } else {
                $( '.story__desc' ).stop().animate( { 'height': height + 'px' }, 'slow' );
            }
            $( this ).toggleClass( 'active' );
        } );
    } );
} );

</script>


</body>
</html>

上部に記載してある

<section class="story inner" id="anc1"> にID指定をし、aタグで飛ばす方法等色々模索してみたのですが、スムーススクロールを入れるとアコーディオンが閉じなくなったり、スムーススクロールが効かずにカクンと一気に動いたりし苦戦しております。

詳しい方お力貸していただけましたら幸いです。
よろしくお願いいたします。

Answer 1

以下はどうでしょうか。

$( 'html' ).animate( { scrollTop: $('.sec-ttl').offset().top }, 'slow' );

---

参考：

In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated.

.animate() | jQuery API Documentation

Comments

[Haru_CROSSHeart]

ありがとうございます！！　いただいた記述を入力したところ希望していた動きになりました。

こちらを複数設置した場合、直属のh2にスムーススクロールさせたい場合の記述方法がわかれば教えていただきたいです。

<script>
$( function() {
$( '.story__desc' ).each( function() {
var height = $( this ).children( '.story__txt' ).height();
$( this ).find( ".story-read" ).on( 'click', function() {
if ( $( this ).hasClass( 'active' ) ) {
$( this ).parents( '.story__desc' ).stop().animate( { 'height': '150px' }, 'slow' );
$( 'html' ).animate( { scrollTop: $('.sec-ttl').offset().top }, 'slow' );
} else {
$( this ).parents( '.story__desc' ).stop().animate( { 'height': height + 'px' }, 'slow' );
}
$( this ).toggleClass( 'active' );
} );
} );
} );
</script>

[Lhankor_Mhy]

全く試していませんが、
$('.sec-ttl', this).offset().top
とかでしょうか？

[Haru_CROSSHeart]

ありがとうございます！　試してみます！

[Lhankor_Mhy]

いや、違うな……

[Lhankor_Mhy]

$( this ).prev().offset().top かも……？

[Haru_CROSSHeart]

ダメでした。　もう少し探ってみます！

[Haru_CROSSHeart]

ありがとうございます！やってみます。

[Haru_CROSSHeart]

$( 'html' ).animate( { scrollTop: $( this ).prev().offset().top }, 'slow' ); と記述してみたのですがダメでした。

[Lhankor_Mhy]

試してみましたが、そもそも、複数並べると「さらに見る」自体が動かなくないですか？

[Haru_CROSSHeart]

複数動かすために記述を

<script>
$( function() {
$( '.story__desc' ).each( function() {
var height = $( this ).children( '.story__txt' ).height();
$( this ).find( ".story-read" ).on( 'click', function() {
if ( $( this ).hasClass( 'active' ) ) {
$( this ).parents( '.story__desc' ).stop().animate( { 'height': '150px' }, 'slow' );
$( 'html' ).animate( { scrollTop: $( this ).parents('.sec-ttl').offset().top }, 'slow' );
} else {
$( this ).parents( '.story__desc' ).stop().animate( { 'height': height + 'px' }, 'slow' );
}
$( this ).toggleClass( 'active' );
} );
} );
} );
</script>

に変更して複数動くようにはなったのですが、スムースだけうまく動かず。。です。

[Lhankor_Mhy]

なるほど。
では、こんな感じで。

$(function () {
$('.story__desc').each(function () {
var height = $(this).children('.story__txt').height();
var storyTitle = $(this).prev('.sec-ttl');
$(this).find(".story-read").on('click', function () {
if ($(this).hasClass('active')) {
$(this).parents('.story__desc').stop().animate({ 'height': '150px' }, 'slow');
$('html').animate({ scrollTop: storyTitle.offset().top }, 'slow');
} else {
$(this).parents('.story__desc').stop().animate({ 'height': height + 'px' }, 'slow');
}
$(this).toggleClass('active');
});
});
});

[Haru_CROSSHeart]

ありがとうございます！！！　希望通りの動きですっ！　ありがおとうございます。泣
varで宣言してセットしてあげるってことですね。　大変勉強になりました！。感謝申し上げます。
ありがとうございます。