OnClick 加载新的 HTML 文档并且应该滚动到它的底部

Question

我正在制作一个简单的交互式原型，由不同的 HTML 文档组成，其中包含图像和可点击的 div，以模仿原型中按钮的行为。现在我想创建单击页面顶部的 link 的行为，这应该将用户滚动到页面底部并显示图像的特定部分（该行为非常模仿远程扩展和显示手风琴控件中的一个单元格）。

现在我已经搜索了自动滚动到标记的特定部分的 JS 解决方案，问题是我似乎无法找到在新 HTML 文档已加载。

我不确定加载新的 HTML 是否会使事情复杂化，但我缺乏网络开发经验，这对我来说似乎非常困难。

这几乎是我现在的方法，但行不通：

HTML 文档 1

<div #akebutton style="position:relative;
    top:-1137px;
    left:410px;
    width:33px;
    height:20px;
    border:1px solid #000;">
        <a href="02_ake expanded.html">
            <span style="position:absolute;width:100%;height:100%;top:0;left: 0;z-index: 1;">
            </span>
        </a>

    </div>

Javascript

$("#akebutton").click(function() {
    $('html, body').animate({
        scrollTop: $("#bottomDiv").offset().top
    }, 2000);
});

HTML 文档 2

<body>
    <img src="ake expanded.png" align="middle">
    <div style="position:relative;top:-502px;left:167px;width:1069px;height:47px;border:0px solid #000;">
        <a href="01_start.html">
            <span style="position:absolute;width:100%;height:100%;top:0;left: 0;z-index: 1;">
            </span>
        </a>

    </div>

    <div id="bottomDiv"></div>

    <script type="text/javascript" src="maintainscroll.jquery.min.js"></script> 

</body>

Answer 1

问题可能是这样的：

<div #akebutton style="position:relative;

必须输入有效 ID 的地方：

<div id="akebutton" style="position:relative;

并且在 js 中你应该使用 event.preventDefault() 来防止默认行为：

$("#akebutton").click(function(e) {
   e.preventDefault(); // it would stop the jump of the anchor.
   $('html, body').animate({
      scrollTop: $("#bottomDiv").offset().top
   }, 2000);
});

注：

akebutton 和 bottomDiv 应该按照您编写的 js 代码在同一页面上。

在我看来，您想滚动到加载的页面，如果是这种情况，那么在准备好文档时，您可以这样做：

$(function(){
     var hash = location.hash;
     if(hash.length){
        $('html, body').animate({
              scrollTop: $(hash).offset().top
        }, 2000);
     }
});

并且在您的标记中，您的锚点应该以这种方式传递哈希值：

<a href="02_ake expanded.html#bottomDiv">

OnClick 加载新的 HTML 文档并且应该滚动到它的底部

OnClick loads new HTML doc and should scroll to the bottom of it

html

javascript

jquery

autoscroll