jqueryとcssの競合について

Question

質問失礼します。
閲覧ありがとうございます。お手数ですが、問題解決にお力を貸してください。

前提・実現したいこと

cssで設定したスクロールスナップとjqueryで設定したページ内遷移（あるボタンを押すとページ内の指定id, classに飛ぶ）を共存させたいです。

発生している問題・エラーメッセージ

恐らく、cssで設定したスクロールスナップとjqueryで設定したページ内遷移で競合が発生しています。
cssのスクロールスナップが存在しているとjqueryのページ内遷移が動かない状況です。

該当のソースコード

<div class="container">
   <section class="container_transition">
       <div id="js_top" class="top"></div>
   </section>
   <section class="container_transition">
       <div id="js_greeting" class="greeting"></div>
   </section>
   <section class="container_transition">
       <div id="js_service" class="service"></div>
   </section>
   <section class="container_transition">
       <div id="js_voice" class="voice"></div>
   </section>
      <section class="container_transition">
       <div id="js_voice" class="company"></div>
   </section>
</div>

.container {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  height: 100vh;
}
.container .container_transition {
    scroll-snap-align: start;
    height: 100vh;
}

$(function(){
  //各位置遷移
  $('.go_to_top').click(function () {
      $('html,body').animate({scrollTop:0},"400");
  });
  $('.go_to_greeting').click(function () {
      $('html,body').animate({scrollTop:1305},"400");
  });
  $('.go_to_service').click(function () {
      $('html,body').animate({scrollTop:2625},"400");
  });
  $('.go_to_voice').click(function () {
      $('html,body').animate({scrollTop:3940},"400");
  });
  $('.go_to_company').click(function () {
      $('html,body').animate({scrollTop:5250},"400");
  });
});

お手数ですが、ご確認をよろしくお願い致します。

Answer 1

html,bodyではなくて.containerにしないとスクロールされないのでは。

Comments

[nagano0141cafe]

回答ありがとうございます。
提示していただいた方法を試しました。
ページ内遷移は可能になりましたが、設定したスピードで遷移先まで移動してくれない状況です...
ゆったりと指定先まで移動するには何がソースに足りないのでしょうか。
ご教示いただきたく存じます。

[soliste16]

付け外しするぐらいでしょうか。もしかしたらもっと良い方法があるかもしれません。

$('.container').css('scroll-snap-type', 'none');
$('.container').animate({scrollTop:1305},"400");
setTimeout(function(){
$('.container').css('scroll-snap-type', 'y mandatory');
},400);

[nagano0141cafe]

ありがとうございます！