當某個鏈接被點擊時，我如何讓用戶彈出到頁面上的特定位置

Question

嘿傢伙我想弄清楚如何讓用戶重定向到另一個頁面並基於點擊的鏈接;讓它們放入包含信息的頁面的那個位置。

我打算在JQuery中對此進行編碼。請讓我知道:)

感謝球員，我希望你有一個Tremdous星期四！

編輯：

<div class="online_training"> 
    <div class="training_image"> 
     <a href="../services.php">...</a> 
    </div><!-- .training_image --> 
    <div class="top-textArea"> 
     <h2><a href="../services.php"></a>....</h2> 
     <p> 
         ..... 
     </p> 
    </div><!-- .top-textArea --> 
</div><!-- .online_training --> 



    I have mutiple of these and so the part to notice where I want to have 
it redirect to and go to that part of the page is the where the .training_image <a> is and the <h2> one is. 

Answer 1

最簡單的方法是隻用錨標記。

在初始頁：

<a href="/otherpage#spot1">Go to spot1</a> 

在otherpage：

<a href="#" name="spot1"></a> 

當otherpage被加載時，它會滾動到錨名爲spot1。

Answer 2

如果由於某種原因，您不能使用原始鏈接href到那裏......，您可以使用window.location和命名錨點的組合。

$('a').click(function(evt){ 
    evt.preventDefault(); 

    switch ($(this).prop('data-destination')) { 
    case 'api': 
     window.location = 'other-page.html#api'; 
     break; 
    case 'tutorial': 
     window.location = 'other-page.html#tut'; 
     break; 
    default: 
     window.location = 'other-page.html#toc'; 
     break; 
    } 
}); 

凡在其他-page.html中你有這些命名錨，例如：

<a name="toc"></a> 
<a name="api"></a> 
<a name="tut"></a> 

理想的解決方案是構建你的鏈接的正確方法，避免使用JavaScript/jQuery的。

Answer 3

假設你有一個div像這樣在頂部或某個頁面上：

<div name="top-div"> 
    <a href="javascript:void(0)" id="clickMe">Click to Scroll</a> 
</div> 

再進一步下跌的頁面，你有，你想去另一個div：

<div id="scrollHere" name="scrollHere"> 
    Hi 
</div> 

使用類似下面的jQuery拿到看中滾動效果：

$("#clickMe").click(function(event) { 
    event.preventDefault(); 
    var scrollTo = $("#scrollHere").css("top"); 
    var n = $(document).height(); 
    $('html, body').animate({ scrollTop: n }, scrollTo); 
}); 

jsFiddle

$("#clickMe").click(function(event) { 
    event.preventDefault(); 
    $.fn.scrollToPos("#scrollHere"); 
}); 

$.fn.scrollToPos = function(position) { 
    var scrollTo = $(position).css("top"); 
    var n = $(document).height(); 
    $('html, body').animate({ scrollTop: n }, scrollTo); 
    return this; 
}; 

jsFiddle 2