当某个链接被点击时，我如何让用户弹出到页面上的特定位置

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