Q&A
それも試したのですが
結局のところ５秒後に、指定の位置にテレポートしてしまいました…
機能しないというのも
指定の位置へは飛ぶのですが、肝心の「スムーススクロール」が起こりません
※bへを押したらbのtopに飛ぶようになってます
その点についてご指摘を頂きたいです。
よろしくお願いします
html
1<body> 2 <main> 3 <div class="a content"> 4 <a class="test">bへ</a> 5 </div> 6 <div class="b content"></div> 7 <div class="c content"></div> 8 <div class="d content"></div> 9 <div class="e content"></div> 10 <div class="f content"></div> 11 <div class="g content"></div> 12 <div class="h content"></div> 13 <div class="i content"></div> 14 </main> 15</body>
css
1*{ 2padding: 0; 3margin: 0; 4} 5 6a{ 7 cursor: pointer; 8 background-color: #fff; 9} 10 11main { 12scroll-snap-type: y mandatory; 13width:100%; 14height:100vh; 15overflow-y: scroll; 16} 17 18.content{ 19scroll-snap-align: start; 20width: 100%; 21height:100vh; 22} 23 24.a,.d,.g{ 25background-color: #f00; 26} 27.b,.e,.h{ 28background-color: #0f0; 29} 30.c,.f,.i{ 31background-color: #00f; 32} 33/* 下記のクラスを付与し背景色を変える */ 34.active{ 35background-color: #000; 36}
js
1var $window = $(window); 2var b_top = $(".b").offset().top; 3var e_top = $(".e").offset().top; 4var h_top = $(".h").offset().top; 5 6$("main").scroll(function(){ 7var y = $(this).scrollTop(); 8console.log(y); 9 10if(y>=b_top){ 11$(".b").addClass("active"); 12}; 13if(y>=e_top){ 14$(".e").addClass("active"); 15}; 16if(y>=h_top){ 17$(".h").addClass("active"); 18}; 19 20}); 21 22//下記がうまく行ってないです 23var b_top = $(".b").offset().top; 24 25$(".test").click(function(){ 26 $("body,main").animate({scrollTop:b_top},500,"swing"); 27});
回答2件
0
ベストアンサー
こんにちは。
CSSを以下のように変更してみてください。
css
1main { 2/* 削除 scroll-snap-type: y mandatory; */ 3width:100%; 4height:100vh; 5overflow-y: scroll; 6}
コメントを受けて追記
では、アニメーション処理をやめてみてはいかがでしょうか。
js
1 // $("body,main").animate({scrollTop:b_top},500,"swing"); 2 $("body,main").scrollTop(b_top);
css
1*{ 2scroll-behavior: smooth; 3}
投稿2020/09/26 03:07
編集2020/09/26 14:15
総合スコア36960
0
ミリ秒数指定なので
Javascript
1 $("body,main").animate({scrollTop:b_top},5000,"swing");
の様に大きな値で試してください。
投稿2020/09/25 21:08
総合スコア2506
jQueryのバージョンはいくつですか？
古いバージョン(1.10とか)なら3.5.1にしてみて下さい。
バージョンが確かに一つ前の物でしたご指摘ありがとうございます
しかしうまく動きませんでした。。。
すいません
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/26 14:09
2020/09/26 14:15
2020/09/26 15:54