Topページボタンの実装が新規テンプレートでエラーになる(Cannot read properties of null )

[mnfdann1]

TOPページのスクロールするとボタンが出現するJavaScriptのコードを記述し、エラーもなく問題なく動くのですが、テンプレート追加したページでは、"Cannot read properties of null (reading 'style')"とエラーが出てしまいます。

以下が記述したコードです。

window.addEventListener("scroll", function () {

const topBtn = document.getElementById("topbutton");

const scroll = window.pageYOffset;

if (scroll > 300) {

topBtn.style.opacity = 1;

} else topBtn.style.opacity = 0;

});

JSの知識が浅く、よくわからないので教えていただきたいです。

[Jizo_Inagaki]

ボタンとJSが設置されている状況がよくわからないのですが、以下のような状況ということですか？

• ボタンはTOPページにのみ設置
• JSは全ページに設置

上記前提であれば、エラーが出力されたページにボタンがないからではと思います。

JS側で要素の有無を判定したり、liquidでページを判定してJSをだし分ければ良いかなと思います。

[参考]

https://shopify.dev/docs/themes/architecture/templates

https://shopify.dev/docs/api/liquid/objects/template