1

嘿伙计们，我想弄清楚如何让用户重定向到另一个页面并基于点击的链接；让它把它们放在包含信息的页面的那个位置。

我打算在 JQuery 中对此进行编码。请告诉我 ：）

谢谢大家，我希望你们星期四过得愉快！！！

编辑：

<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.
4

3 回答 3

4

最简单的方法是只使用锚标签。

在初始页面上：

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

在其他页面上：

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

当加载其他页面时，它将滚动到名为 spot1 的锚点。

于 2013-04-04T23:41:31.553 回答
1

如果由于某种原因您不能使用原始链接 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;
  }
});

在 other-page.html 你有那些命名的锚点，例如：

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

理想的解决方案是以正确的方式构建链接并避免使用 javascript/jQuery。

于 2013-04-04T23:45:30.340 回答
1

假设您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

于 2013-04-04T23:46:03.090 回答