実現したいこと
ページ内に「overflow: scroll;」で内容を表示させている要素があります。
その外にページ内リンクを設置しており、リンククリックで該当の箇所までスムーススクロールで移動し、表示させたいです。
現在、下記の通り書いているのですが、移動位置が不安定です。
該当のソースコード
jqueryは「3.6.0」を読み込んでいます。
※jquery使用は必須ではありません。
html
1 <ul> 2 <li><a href="#link001">link001</a></li> 3 <li><a href="#link002">link002</a></li> 4 <li><a href="#link003">link003</a></li> 5 </ul> 6 <div id="scrollBox" style="height: 500px; overflow-x: auto; overflow-y: scroll; background-color: #ddd;"> 7 <p id="link001">link001</p> 8 <div style="height: 500px;"></div> 9 <p id="link002">link002</p> 10 <div style="height: 500px;"></div> 11 <p id="link003">link003</p> 12 <div style="height: 500px;"></div> 13 </div>
jquery
1 $(function(){ 2 $('a[href^="#"]').click(function(){ 3 var speed = 600; 4 var href= $(this).attr("href"); 5 var target = $(href == "#" || href == "" ? 'html' : href); 6 var scroll = target.position(); 7 var position = scroll.top; 8 $("#scrollBox").animate({scrollTop:position}, speed, "swing"); 9 return false; 10 }); 11 });
当方、jsなどにはあまり詳しくなく、上記もコピペ文を少し書き換えたものになります。
こちらの実装方法についてご教示いただけますでしょうか。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2022/08/04 16:38