重定向到一些其他頁面，然後動畫到達一定的scrollTop

想要做什麼去其他頁面的內部鏈接呢！但通過jQuery。不能使用常規的外部跳轉，因爲使用視差滾動不適合跳轉。重定向到一些其他頁面，然後動畫到達一定的scrollTop

的內部聯繫，我用像這個 -

$(function() { 
    $("#clickNews").click(function(e){ 
     e.preventDefault(); 
     $('html,body').animate({scrollTop: 2400}, 1500); 
    }); 
});

但如何執行重定向其次動畫（）？

我想點擊一個錨頁面上..到了另一個頁面的某些scrollTop的

有這樣的WAY - >>

$("#clickCatalog").click(function(e){ 
    e.preventDefault(); 
    window.location = '/ABC/'; 
    window.load(function(){ 
    $('html,body').animate({scrollTop: 0}, 1500); 
    }); 
});

來源

2014-11-08 Nilanjan Roy

請參閱animate函數的文檔

您可以通過將作爲第四個參數重定向或通過選擇與「完整」與功能價值

重點對象的函數10

是這樣的：

$(function() { 
    $("#clickNews").click(function(e){ 
     e.preventDefault(); 
     $('html,body').animate({scrollTop: 2400}, { 
      duration: 1500, 
      complete: function() { 
       window.location = '{url}'; 
      } 
     }); 
    }); 
});

來源

2014-11-08 04:54:38

您的訂單錯誤。你做了動畫，然後重定向。他想要重定向然後動畫 – MiltoxBeyond 2014-11-08 05:02:29

啊，好的。我的錯。 – 2014-11-08 05:07:41

你可以做的最接近的事是通過Ajax加載你想要的頁面，加載到的元素。

線沿線的東西：

$('a.internal').click(function(event){ //Put class="internal" to load with ajax... 
    event.stopPropagation(); 
    event.preventDefault(); 
    var newPage = $('<div class="page"></div>'); 
    var oldPage = $('.page'); 
    newPage.css('opacity',0); 
    oldPage.animate({opacity:0, top: -5000 }, { 
    complete: function(){ 
     newPage.animate({opacity:1}); 
    } 
    } 
    newPage.load('http://localhost/myNewPage.html body >'); 
    $('body').append(newPage).animate({'scrollTop':0}); 

});

你要知道它是未經測試，但它應該工作。

編輯：修正了一些錯別字

來源

2014-11-08 05:27:29 MiltoxBeyond

對不起，但沒有工作..實際上它有這些線路的一些問題..我試圖修復，但無法得到它！「oldPage.animate（{不透明度：0，頂端：-5000px}}，{ 完成：函數（）{ newPage.animate（{不透明度：1}} } 」 – 2014-11-16 06:24:12

您還可以使用localStorage做這個任務。我嘗試過一次，它適用於我。我在我的導航標籤中使用了這個，這就是爲什麼我要將id元素傳遞給localStorage。

$('#block li').click(function(){ 
    //get the clicked element's id. eg:- id='1' 
    var menu_selector = $(this).attr('id'); 
    //store the value into localStorage 
    localStorage.setItem('selector', menu_selector); 
    //do the redirection 
    window.location.replace("/about"); 
}); 

//if localStorage is not empty 
if(localStorage.getItem('selector') != 'undefined' && localStorage.getItem('selector') != null) { 
    // get the stored values 
    var selector = localStorage.getItem('selector'); 

    //I'm asuming, my destination is <div id="destination-1"></div> 
    var destination = $('#destination-'+selector); 

    //now do the scrollTop 
    $('html, body').animate({ 
     scrollTop: destination.offset().top - 50 
    }, 700); 

    //distroy the local storage 
    window.localStorage.clear(); 
});

另請注意，這將不適用於非常舊的瀏覽器。

來源

2017-01-17 07:26:00 nanbatman

重定向到一些其他頁面，然後動畫到達一定的scrollTop

回答

相關問題