一旦用戶到達頁面上的特定點，自動滾動到特定點/ achor

所以，這裏是：一旦用戶到達頁面上的特定點，自動滾動到特定點/ achor

我會有4個div。下面的例子。每個div都有一個特定的高度（大約1500px），但寬度爲100％。每個div都是不同的顏色。

我想要它，以便當用戶滾動頁面並達到特定點時，JavaScript將啓動並自動將用戶滾動到下一個div。

所以，說用戶是垂直滾動和div＃2出現和div＃1消失。當div＃1剩下大約200px時，頁面將自動向下滾動，以便div＃2與瀏覽器窗口的頂部齊平。

一個很好的例子：http://thejuly16.com/基本上這樣做，但不能解決問題。

這裏內容

內容這裏

來源

2011-11-21 user981458

該頁面沒有做任何事情對我來說：/

無論如何，如果我得到你的意思，你應該在每個div的頂部都有一些錨點，將一些代碼掛接到滾動事件上，檢查其上的值，並在該值處於期望值時滾動到錨點範圍。您可以檢查this fiddle及相關jQuery代碼：

$(window).bind('scroll', function(){ 
    if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350)) { 
     window.scrollTo(0,1500); 
    } 
});

這可能是用戶一個奇怪的行爲，因爲滾動起來是相當混亂。但是，我們可以通過檢查用戶在this fiddle上升或下降的頁面一樣，只是檢查，如果最後滾動位置比當前滾動位置更高或更低的解決這個問題：

var currentScroll = 0; 
var previousScroll = 0; 

$(window).bind('scroll', function(){ 
    currentScroll = $(window).scrollTop(); 
    if (($(window).scrollTop() > 1300) && ($(window).scrollTop() < 1350) && currentScroll > previousScroll) { 
     window.scrollTo(0,1500); 
    } 
    previousScroll = $(window).scrollTop(); 
});

顯然，您需要在頁面中添加儘可能多的if語句作爲「跳轉」。

來源

2011-11-21 08:32:17 scumah

嘿，非常感謝！這太棒了。你可能能夠幫助我更進一步，因爲大部分情況都在我的頭上。如何添加更多的Div？如果我添加第三個div，它不起作用。我怎樣才能順利地滾動到那個點而不是跳躍？如果用戶的滾動空閒，是否也可以使其滾動？當我向上滾動，比如說10像素，它不會開始向下滾動到那一點？這些東西有可能嗎？非常感謝你的幫助！ – user981458

我有一個解決方案，如下面的代碼中給出的。不知何故，它不在jsFiddle上工作，但在我的機器上工作。請嘗試在你自己的編輯器

<HTML> 
<HEAD> 
    <SCRIPT LANGUAGE="JavaScript"> 
    var isWorking = false; 
var lastScrollPosition 
function adjust(oDiv) { 
    if(oDiv.scrollTop > lastScrollPosition && !isWorking && oDiv.scrollTop % 400 > 300) { 
     isWorking = true 
     scroll(oDiv); 
    } else 
     lastScrollPosition = oDiv.scrollTop; 
} 

function scroll(div) { 
    if(div.scrollTop % 400 > 10) { 
     div.scrollTop = div.scrollTop + 10; 
     lastScrollPosition = div.scrollTop; 
     setTimeout(function(){scroll(div);}, 10); 
    } else 
     isWorking = false; 
} 
    </SCRIPT> 
</HEAD> 

<BODY> 
    <div style="height: 440px; border: solid 1px red; overflow-Y: auto" onscroll="adjust(this)"> 
    <div style="height: 400px; border: solid 1px green"></div> 
    <div style="height: 400px; border: solid 1px green"></div> 
    <div style="height: 400px; border: solid 1px green"></div> 
    <div style="height: 400px; border: solid 1px green"></div> 
    <div style="height: 100px"></div> 
</div> 
</BODY> 
</HTML>

來源

2011-11-21 08:37:13

你好，非常感謝你的幫助。我很感激。我遇到了一些問題。我只想在用戶停止滾動時發生滾動。一旦他們到達這一點並向上滾動一小部分，它就開始回滾到那一點。它奇怪的滾動到頁面底部，因爲它跳了很多。但它是一個非常好的代碼，我非常喜歡它。感謝您的幫助堆和任何進一步的幫助，將不勝感激。謝謝！ – user981458

我認爲這個功能可用於jQuery。我試過這個，但是我在Javascript中的OnClick事件上做了這個。在你的情況下，onFocus或任何其他合適的事件，如鼠標懸停等應該工作。

希望這會有所幫助。

來源

2011-11-21 12:44:11

一旦用戶到達頁面上的特定點，自動滾動到特定點/ achor

回答

相關問題