跳转到加载区域的底部

我构建了垂直时间轴，但在完成后我意识到我最早的事件在顶部，而在下面添加的更新。所以我决定把这个div的高度设置为270px并溢出：overlay（这个div是我时间轴事件的父对象，所有事件都有自己的div - 它现在的高度cca都是6000px）总是跳到底部时间表以查看当前事件。跳转到加载区域的底部

我的父母格到这些事件具有类.TIMELINEcolumn
脚本，我在网上找到的这$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

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

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

来源

2017-06-19 Brano

这是一个正确的方法。

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

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

2）然后，用一点点的javascript ，迫使你的页面向下滚动出现，通过使用这个你的身体标记内，在你的页面的HTML部分的开头：

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

使你的身体标记可能是在这最后的格式：

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

有你代替的test.html，在我的例子，你的页面的名称，页面的只是名字，即，你不需要在这里插入你所有的网址，不是绝对的也不是相对的。

就是这样。 100％W3C兼容。

参考：https://www.w3.org/MarkUp/1995-archive/Elements/A.html在这里命名为statosdotcom家伙的帮助下类似

来源

2017-06-19 20:25:01 statosdotcom

非常感谢。哇，这么简单，理论上它应该起作用，这很明显。体内标签中的JavaScript工作并在加载时触发（我在访问我的页面时看到了url的变化），但它没有跳转到锚点。我也检查过，如果我的timeline.php生成它，它确实如此，所以我只是认为它不起作用，因为javacript在加载时执行得太快，也许它没有在那个时候提供该锚点。非常感谢。我也会尝试现在从别人的答案中看到。 – Brano

Brano，谢谢你的回报。我很失望，它没有奏效。请确保你在页面的末尾放置了''这个锚点，也就是说，在你的重要div（或者作为一个测试，使它成为你网页上的最后一个东西）之后。好运。 – statosdotcom

不好意思，再想一想，如果你没有找到更好的方法来获得它，也许你可以在这里实现一些解决方法，在我的代码中进行一些额外的修改以更好地满足你的需求。一种方法是从** body **标签中取出我建议的javascript，并将其放在页面的末尾“当然”放在需要的之内。但更好的是，我认为尝试某种解决方案是值得的，比如在你的** div **中放置“get anchor”命令，所以每当你的时间线获得新内容时，每次加载时，它滚动到最后。 – statosdotcom

-1

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

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

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

来源

2017-06-19 20:06:59 Korgrue

Korgrue您好，感谢这个想法，其实我用的东西。感谢帮助。 – Brano

我不知道滚动事件（还）。但是不要让页面跳到所有位置（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) 
});

来源

2017-06-19 20:09:19 Nukeface

嗨Nukeface，正如我所提到的，我已经尝试过应用flex和flex-reversed类似于你所描述的，不幸的是，切换我的时间轴的方向意味着我将不得不编写php来从头开始生成事件过度。所以我用锚来解决这个问题并跳到底部。对我的要求作出反应非常感谢。 – Brano

看来你正在使用jqueryonload使用jQuery是指利用内幕$(document).ready()函数的代码如下：

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

当然这应该工作，如果该代码$('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight); wor ks与任何其他事件，即它是正确的代码。对于测试请尝试以下操作：

//你body标签内插入顶部

如下：

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

然后在你head标签的地方结束了以下内容：

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

如果点击链接Scroll to bottom工作正常，所以它也可以与$(document).ready()一起正常工作。

来源

2017-06-19 20:21:31 SaidbakR

谢谢SaidbakR，我已经尝试过，但由于某种原因它不起作用。我已经将包含到了文档的正文中，并且还包含，但它不起作用。我喜欢这个想法，因为我不需要锚定div。你认为我需要把这个$（document）.ready（）放在我的代码中吗？这是“没有工作的例子”。 http://focuscz.8u.cz/PAGES/SANDBOX/timelineOnclick/lists.php – Brano

跳转到加载区域的底部

回答

相关问题