質問失礼します。
閲覧ありがとうございます。お手数ですが、問題解決にお力を貸してください。
前提・実現したいこと
cssで設定したスクロールスナップとjqueryで設定したページ内遷移(あるボタンを押すとページ内の指定id, classに飛ぶ)を共存させたいです。
発生している問題・エラーメッセージ
恐らく、cssで設定したスクロールスナップとjqueryで設定したページ内遷移で競合が発生しています。
cssのスクロールスナップが存在しているとjqueryのページ内遷移が動かない状況です。
該当のソースコード
html
1<div class="container"> 2 <section class="container_transition"> 3 <div id="js_top" class="top"></div> 4 </section> 5 <section class="container_transition"> 6 <div id="js_greeting" class="greeting"></div> 7 </section> 8 <section class="container_transition"> 9 <div id="js_service" class="service"></div> 10 </section> 11 <section class="container_transition"> 12 <div id="js_voice" class="voice"></div> 13 </section> 14 <section class="container_transition"> 15 <div id="js_voice" class="company"></div> 16 </section> 17</div>
css
1.container { 2 overflow-y: auto; 3 scroll-snap-type: y mandatory; 4 height: 100vh; 5} 6.container .container_transition { 7 scroll-snap-align: start; 8 height: 100vh; 9}
jquery
1$(function(){ 2 //各位置遷移 3 $('.go_to_top').click(function () { 4 $('html,body').animate({scrollTop:0},"400"); 5 }); 6 $('.go_to_greeting').click(function () { 7 $('html,body').animate({scrollTop:1305},"400"); 8 }); 9 $('.go_to_service').click(function () { 10 $('html,body').animate({scrollTop:2625},"400"); 11 }); 12 $('.go_to_voice').click(function () { 13 $('html,body').animate({scrollTop:3940},"400"); 14 }); 15 $('.go_to_company').click(function () { 16 $('html,body').animate({scrollTop:5250},"400"); 17 }); 18});
お手数ですが、ご確認をよろしくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/04/27 07:37
2020/04/27 07:52
2020/04/29 08:56