平滑滚动到另一个页面的部分

Question

我正在尝试平滑滚动到另一个页面上的一个部分，当然如果你想这样做，你必须添加目标 URL 及其部分 ID。 但是，如果您只是单独执行此操作，它会变得非常笨拙，以至于它会跳到该部分并在到达那里之前闪烁白色。 所以现在，我想看看如何实现平滑滚动。

我在这里遵循了这个解决方案来实现平滑滚动，但它不起作用。 似乎 JS 代码由于某种原因没有激活。 我将点击我网站上的链接，该网站不会直接指向该部分。 几乎什么都没有发生。 如果我注释掉 js 代码，它会恢复正常并且可以正常工作，但它只是存在性能问题并且没有平滑滚动。 我不确定是否需要更多 JavaScript 或者我这样做的方式是问题所在。 该链接是通过 iframe 访问的，所以也许这就是问题所在。

这是我的网站： https://tempest-digital.io/

如果您向下滚动到显示“项目”的底部并单击它，然后单击“项目 01”部分中的“阅读更多”。 这是链接应该指向另一页上的部分的地方。 在这里，您可以看到我的意思链接不起作用的地方。 如果在 iframe 中无法做到这一点，我可以接受。 我只是更喜欢将我的特定项目部分放在 iframe 中。

这是一段代码，它应该针对另一个页面上的部分并应用平滑滚动。

HTML

<div id="portfolio-holder" class="popup popup-fullscreen">
  <button class="go-back"><i class="fa-solid fa-circle-arrow-right"></i></button>
  <iframe src="portfolio.html"></iframe>
</div>

HTML 用于投资组合。html

<div class="box">
        <img src="Images/game-design.png" alt="">
        <div class="content">
            <h3>project 01</h3>
            <p>This is my game design portfolio where I have created both 3D and 2D games both in Unity and GameMaker Studio 2.
                These are uploaded on itch.io, a website made for game developers to advertise their work. 
            </p>
            <a href="./index.html#itch">read more</a>
        </div>
    </div>

JS

$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {

  if (this.hash !== "") {
    // Prevent default anchor click behavior
    event.preventDefault();

    var hash = this.hash;

    $('html, body').animate({
      scrollTop: $(hash).offset().top
    }, 800, function(){

      // Add hash (#) to URL when done scrolling (default click behavior)
      window.location.hash = hash;
    });
  }
});

});

Answer 1

你安装了jquery，如果没有你可以在这里安装Jquery