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

【问题标题】：Using jQuery to link to a page and then jump to a specific header使用 jQuery 链接到页面，然后跳转到特定的标题
【发布时间】：2023-04-06 22:36:01
【问题描述】：

我有一个包含社区活动页面的客户网站。在那个页面上，会像这样生成并一一发布事件：

<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 框架。

谢谢。

【问题讨论】：

标签： javascript jquery hyperlink anchor

【解决方案1】：

像这样？

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 添加到页面网址的末尾，例如：http://fiddle.jshell.net/filever10/afK7M/show/light/#xmas

做了一个小提琴：http://jsfiddle.net/filever10/afK7M/

【讨论】：

是的，我已经实现了它。谢谢！