ロード時にdivの下部にジャンプ

私は垂直のタイムラインを作成しましたが、終了した後、私の最も古いイベントが一番上にあり、新しいものが下に追加されています。だから、このdivを270pxの高さでオーバーフローさせることにしました：オーバーレイ（このdivは私のタイムラインイベントの親です。すべてのイベントには独自のdivがあります）、常に6000pxのccaがあります。現在のイベントを表示するためのタイムライン。ロード時にdivの下部にジャンプ

これらのイベントへの私の親のdiv私はオンラインを見つけクラス.TIMELINEcolumn
スクリプトは私が私のページの一番下に置いていることはこれです、この$('#yourDiv').scrollTop($('#yourDiv')[0].scrollHeight);

ありました：
<script> $('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight); </script>

しかし、誰成功、私はまた、このスクリプトを文書の頭に置いてみましたが、成功もありませんでした。私はまたディスプレイを使用していくつかの純粋なCSSのアプローチを見つける：フレックスと逆方向を適用するよりも、それは私が探していたものではない。それはシンプルに見えますが、私のためにはその超複雑です。私は実際にタイムライン上でそれらのイベントにアンカーを働かせたいと思っていましたが、でも、負荷のdivの底に常にジャンプするこの簡単なタスクは私の悪夢です。誰かが手がかりを持っている場合は、プリミティブな方法で少し説明してください。そうすれば、私のコードもあなたのコードを理解することができます。どうもありがとう。

出典

2017-06-19 Brano

これは正しい方法の1つです。ジャバスクリプトの少しを使用して、

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

2）次に：

1）は、あなたのページがまでスクロールしたいページの語尾にこの100％純粋なHTMLのアンカータグを挿入します

javascript:document.location='test.html#pointToScrollTo'
0123：あなたのページのHTML部分の初めに、あなたのBODYタグ内にこれを使用することによって、そこにスクロールダウンして、あなたのページを強制
だからあなたのBODYタグは、この最後の形式にすることができます：
あり
<body onload="javascript:document.location='test.html#pointToScrollTo';">

あなたのページの名前、およびページの名前だけで、私の例で、test.htmlというに置き換えて、つまり、絶対URLでも相対URLでもなく、ここにあなたのURLをすべて挿入する必要はありません。

これだけです。 100％W3C互換。参考のため

：statosdotcomとしてここに命名男の助けを借りて、同様のhttps://www.w3.org/MarkUp/1995-archive/Elements/A.html

出典

2017-06-19 20:25:01 statosdotcom

ありがとうございます。うわー、とてもシンプルで、理論的にはうまくいくはずです。 bodyタグのJavascriptが動作し、読み込み時にトリガされました（私のページにアクセスするときにurlの変更が見られました）が、アンカーにジャンプしませんでした。私はtimeline.phpがそれを生成しているかどうかもチェックしていますので、javacriptがあまりにも速く実行され、その時点でアンカーがまだ用意されていない可能性があるため、動作しないと思っています。どうもありがとう。私はまた、他の人からの答えを見てみることにします。 – Brano

Brano、お返事ありがとうございます。私はそれがうまくいかないことに失望しています。アンカー ''をページの末尾に配置してください。重要なdivの後に（つまり、テストとしてページ上の最後のものに）している可能性があります。幸運。 – statosdotcom

もう一度考えてみてください。もしあなたがそれを得るより良い方法を見つけられない場合は、ここでいくつかの回避策を実装して、あなたのニーズに合わせてコードを少し修正してください。 1つのアプローチは、** body **タグからの私の提案されたjavascriptを外して、あなたのページの最後に（もちろん、必要な内部に）（もちろん、必要な内部に）入れてしまうことです。しかし、それよりも優れていると思うのですが、** div **の中に「アンカーを取得」コマンドを置くような解決策を試す価値はあると思いますので、タイムラインが新しいコンテンツを取得するたびに、最後までスクロールします。 – statosdotcom

-1

これほど簡単な操作を行うことができます。ウィンドウのロード時に、urlターゲットを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

（まだ）スクロールイベントについてはわかりません。しかし、ページを全面的にジャンプさせる代わりに（6000ピクセルは平均的な画面でスクロールしています）、すべての要素を逆転させるのはどうですか？

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、私が言及したように、フレックスとフレックスリバースを適用しようとしたことはあなたが記述したのと似たようなことを行いました。残念ながら、私のタイムラインの方向を切り替えると、スクラッチからイベントを生成するPHP以上。したがって、私はこれを解決して底に飛びつくためにアンカーを使用しました。私の要求に反応してくれてありがとう。 – Brano

あなたが以下のように$(document).ready()関数内のコードを使用してjQueryの手段とjqueryonloadを使用しているようだ：

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

もちろんこのコードが有効な場合は$('.TIMELINEcolumn').scrollTop($('.TIMELINEcolumn')[0].scrollHeight); wor他の事象、すなわち正しいコードである。テストのために次のことを試してください：あなたの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

ロード時にdivの下部にジャンプ

答えて

関連する問題