2018/05/07

モーダル内でのページ内リンクのスムーズスクロール








モーダル内のページ内リンクが動かなくて困ったので、クリックしたら位置を計算してスクロールするjsを作ってみました。


動作サンプル

See the Pen モーダル内でのページ内リンクのサンプル by takapen (@takapen) on CodePen.






html
モーダル開閉 btn

ページ内リンク btn

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

stop point

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身

中身




css
.js-modal__main__scroll {
  height: 80px;
  overflow:scroll;
  -webkit-overflow-scrolling:touch;
  overflow-scrolling:touch;
  background: #fff;
}



js
// ここからスクロール
  $('#btn').on('click',function(){
    // 要素の位置を取得して変数に格納
    var isPosition = $('#point').position();
    console.log(isPosition.top);
    $(".js-modal__main__scroll").animate({scrollTop:isPosition.top - 30}, 300);
  });