需要编写一个 JS 或 jQuery,当单击第一个按钮时,它会向下滚动到 <a>
标签,然后单击 <a>
标签。非常感谢任何帮助。 HTML如下:
<a href="" id="reserveButton">Reserve Now</a>
<div class="spacerDiv"></div>
<a id='secondClick' href="http://www.google.ca" target="_blank">Click here again</a>
最佳答案
使用 href="#secondClick"
自动滚动页面,而不是简单地在所需元素上执行 click()
:
const EL = sel => document.querySelector(sel);
EL("#reserveButton").addEventListener('click', () => {
// Page is already scrolled at this point since we used #hash href
// So just perform a click...
EL("#secondClick").click();
});
<a href="#secondClick" id="reserveButton">Reserve Now</a>
<div class="spacerDiv" style="height: 200vh;">some space... scroll down</div>
<a id='secondClick' href="https://www.google.ca" target="_blank">Click here again</a>
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
<小时/>如果你想使用更好的UX(动画),你可以使用JS的Element.scrollIntoView()
const EL = sel => document.querySelector(sel);
const el_reserve = EL("#reserveButton");
const el_second = EL("#secondClick");
el_reserve.addEventListener('click', (evt) => {
evt.preventDefault(); // Prevent default browser action
el_second.scrollIntoView({behavior: "smooth"});
el_reserve.__is_clicked = true;
});
new IntersectionObserver((entries, obs) => {
if (el_reserve.__is_clicked && entries[0].isIntersecting) {
el_second.click(); // Perform a click when element is in viewport
el_reserve.__is_clicked = false; // reset
}
}).observe(el_second);
<a href="#secondClick" id="reserveButton">Reserve Now</a>
<div class="spacerDiv" style="height: 200vh;">some space... scroll down</div>
<a id='secondClick' href="https://www.google.ca" target="_blank">Click here again</a>
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
关于javascript - 依次单击两个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58686051/