时间戳

首页 > 解决方案 > 使用目标链接时滚动到 iframe

javascript - 使用目标链接时滚动到 iframe

问题描述

我需要弄清楚如何组合目标链接和 iframe。我使用 iframe 来托管视频并使用目标链接让观众更改 iframe 中正在播放的视频，有时我们有很多不同的问题，页面可能会很长，所以我需要弄清楚如何滚动到 iframe链接被点击。我试过结合锚标签，但我想不通。任何帮助表示赞赏！

<div class="c-sponsored-landing__main-video">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe name="video" src="https://player.vimeo.com/video/274107021?rel=0&amp;autoplay=1&amp;showinfo=0"
            webkitallowfullscreen mozallowfullscreen allowfullscreen class="embed-responsive-item"></iframe>
    </div>
</div>

<div class="c-sponsored-landing__thumbnails">
    <div class="row">
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107021?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg1.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q1:</strong> Why is monitoring intermediate AMD important?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107111?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg2.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q2:</strong> What impact does early Wet AMD detection have on visual outcomes?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107379?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg3.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q3:</strong> If the goal is early Wet AMD detection to help prevent vision loss,
                then how are we doing?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274133949?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg4.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q4:</strong> What impact does severe vision loss have on a patient's quality of
                life? </p>
        </div>
    </div>
</div>

实时链接：https ://www.visioncareprofessional.com/digital/notalvision/1/index3.html

标签： javascripthtmliframetarget

解决方案

您可以获取视频的引用并监听链接上的点击事件，一旦触发点击事件，阻止正常行为并使用scrollIntoView显示视频。

const video = document.getElementById("video")
const links = document.querySelectorAll("a")

links.forEach(link => {
    link.addEventListener("click", (e) => {
    e.preventDefault()
    // LOGIC TO CHANGE THE VIDEO
    video.scrollIntoView({ block: 'end',  behavior: 'smooth' });
  })
})

https://jsfiddle.net/dupftwqa/1/

推荐阅读