跳轉到加載區域的底部

我構建了垂直時間軸，但在完成後我意識到我最早的事件在頂部，而在下面添加的更新。所以我決定把這個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

跳轉到加載區域的底部

回答

相關問題