Question

我已经建立了垂直时间轴，但在我完成之后，我意识到我最老的事件在顶部，而在下面添加了更新的事件。所以我决定使这个div的高度为270px并溢出：overlay（这个div是我的时间轴事件的父级，所有事件都有自己的div - 现在它的高度cca为6000px全部）总是跳到底部时间表，以便查看当前事件。

这些事件的父母div有.TIMELINEcolumn课程我在网上找到的脚本是$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

我在页面底部放的是这样的：
<script> $('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight); </script>

但没有成功，我也尝试将这个脚本放在文档的头部并且也没有成功。我也找到了一些使用display：flex的纯css方法，而不是应用反向方向，但这不是我想要的。它看起来很简单，但对我来说它非常复杂。起初我实际上想要在时间轴上为这些事件设置工作锚点，但即使这个简单的任务总是在加载时跳到div的底部对我来说也是一场噩梦。如果有人有线索，请尝试以原始方式解释一下，这样我的代码也可以理解。非常感谢。

Answer 1

这是一种正确的方法。

1）在页面的结尾处插入此100％纯HTML锚标记，您希望页面滚动到的位置：

<a name="pointToScrollTo"></a>

2）然后，使用一些javascript，强制您的页面向下滚动，在您的BODY标记内，在页面的html部分的开头使用：

javascript:document.location='test.html#pointToScrollTo'

所以你的BODY标签可以采用这种最终格式：

<body onload="javascript:document.location='test.html#pointToScrollTo';">

在我的示例中，您将 test.html 替换为您的网页名称，只替换页面的名称，即您不需要在此处插入所有网址，而不是绝对的也不是相对的。

那就是它。 100％W3C兼容。

供参考：https://www.w3.org/MarkUp/1995-archive/Elements/A.html

Answer 2

我不知道滚动事件（还）。但是，不是让页面遍布整个地方（6000px在平均屏幕上滚动很多），如何反转所有元素？

看看at this answer。这是扭转所有元素。它的要点如下：

ul = $('#my-ul'); // your parent ul element
ul.children().each(function(i,li){ul.prepend(li)})

附加到您的命名：

$timeline = $('.TIMELINEcolumn');
$timeline.children().each(function(key, child) {
    $timeline.prepend(child)
});

Answer 3

您似乎正在使用jquery onload，jquery意味着在$(document).ready()函数中使用您的代码，如下所示：

$(document).ready(function(){
      $('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight);
})

当然如果代码$('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight);适用于任何其他事件，即它是正确的代码，这应该有效。如需测试，请尝试以下方法：

//在body标记的顶部插入以下内容：

<a href="javascript:scrollto()">Scroll to bottom</a>

然后在head标记的末尾添加以下内容：

<script>
   function scrollto(){
      $('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight);
   }
</script>

如果点击链接Scroll to bottom工作正常，那么它也适用于$(document).ready()。

Answer 4

你可以做一些简单的事情。在窗口加载时，将url target设置为div目标的哈希值。如果启用了自动滚动器，它将滚动而不是跳转。

window.document.onload = function(e){ 
        window.location.href = 'www.yourwebaddress.com/#targetdiv';
    }

<div id ="targetdiv"></div>

在加载

4 个答案: