我正在創建一個按鈕,使用scrollIntoView()Javascript 中的函數將客戶發送到 Woocommerce 中的評論字段。當評論部分進入視口時,我還在努力隱藏和顯示按鈕,并且它正在工作,但我想更進一步。瀏覽器底部點擊 ID 時的按鈕,這是我不想要的。我希望按鈕在 ID 到達瀏覽器頂部時顯示。這是基本的 HTML:<button onClick="scrollToComment()" id="scroll-btn">Leave a Review</button><div id="reviews"> //a bunch of reviews and comments go here <div id="review_form"></div></div>這是JS:window.addEventListener('scroll', function() { var element = document.querySelector('#reviews'); var position = element.getBoundingClientRect(); var scrollBtn = document.querySelector('#scroll-btn'); if(position.top < window.innerHeight && position.bottom >= 0) { scrollBtn.style.display = 'block'; } else { scrollBtn.style.display = 'none'; }});function scrollToComment() { var button = document.querySelector('#review_form'); button.scrollIntoView();}任何幫助,將不勝感激!
當 id 到達瀏覽器視口的頂部時,在 JavaScript 中執行操作
江戶川亂折騰
2022-06-05 10:29:06