使用jQuery链接到一个页面，然后跳转到一个特定的标题

Using jQuery to link to a page and then jump to a specific header

本文关键字：一个 标题 链接 jQuery 使用 然后      更新时间：2023-09-26

我有一个客户端站点，它有一个社区事件页面。在该页面上，事件被生成并一个接一个地发布，如下所示：

<div class="event-info">
    <h5>This is an event</h5>
    <span class="date">December 25, 2013</span>
    <p class="details"></p>
</div>

他们希望在主页上有一个链接，指向这一个圣诞节活动，它最终会开始在页面上向下移动。真正找到该块的唯一方法是通过<H5>的内容。一个经典的锚链接就可以了，但我不能将它们添加到<div class="event-info" />块中。主页链接必须转到该页面，然后跳到必要的<div class="event-info" />。

jQuery或vanilla javascript是我所要处理的全部内容。我有一个.js文件可以添加，当然还有主页上链接本身的html/javascript。我无法操作页面的现有HTML（内容是动态的——我会向其中添加新内容），也无法访问后端.NET框架。

谢谢。

这样的东西

jquery:

var hash = window.location.hash;
if (hash==='#xmas') {
    var xmas = $('.date:contains("December 25")').parent('.event-info').offset().top;
    $('html,body').animate({scrollTop: xmas}, 500);
}

您只需将#xmas添加到页面url的末尾，如：http://fiddle.jshell.net/filever10/afK7M/show/light/#xmas

制作小提琴：http://jsfiddle.net/filever10/afK7M/

相关文章：