日: 2023年8月3日

[C++] 346 BBS閲覧アプリの製作 その30 レス番号へスクロール JavaScript

[M1 Mac, MacOS Ventura 13.3.1, clang 14.0.3]

レスアンカー先へクリックでスクロールできるようにしました。

意外と手間取りました。HTML埋め込みのJavaScriptではtopプロパティで絶対Y座標が取得できるのですが、JavaScriptファイルでは相対Y座標でした。

なのでwindow.scrollYで現在位置を把握し、これにアンカー先の相対Y座標を加算する形になります。

// クリックしたレス番号までスクロール
function moveToRes(element){
    var resNum = element.innerText.replace(/>>/g, '');
    console.log("resNum: " + resNum);

    var targetElement = document.getElementById(resNum);
    var rect = targetElement.getBoundingClientRect();
    var yTo = rect.top;
    console.log("yTo = " + yTo);

    var currentY = window.scrollY;
    var scrollToY = currentY + yTo;
    console.log("scrollToY = " + scrollToY);

    scrollTo(0, scrollToY);
}