【问题标题】: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>

他们希望主页上的链接指向这一圣诞节活动,该活动最终将开始向下移动。真正找到该块的唯一方法是通过&lt;H5&gt; 的内容。经典的锚链接可以解决问题,但我无法将它们添加到 &lt;div class="event-info" /&gt; 块中。主页链接必须转到此页面,然后跳转到必要的&lt;div class="event-info" /&gt;

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/

    【讨论】:

    • 是的,我已经实现了它。谢谢!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-01-11
    • 2017-10-10
    • 1970-01-01
    • 2014-03-28
    • 1970-01-01
    • 2015-03-13
    相关资源
    最近更新 更多