链接到不同的页面-> jquery 滚动到特定的锚点答案

【问题标题】：Link to different page -> jquery scroll to specific anchor链接到不同的页面-> jquery 滚动到特定的锚点
【发布时间】：2012-08-05 21:02:16
【问题描述】：

在我的主页底部，我包含了一个联系表格，并将此部分的锚指定为 div id="contact"。

当点击任何页面上的联系按钮时，它应该导航到主页并在页面加载时自动滚动到联系表单。

在查看了我在此处找到的类似问题后，我未能成功实现此功能：jQuery scroll to ID from different page 当我尝试时，它只是跳转到表单。我希望它平滑滚动。

<li><span>Get in touch</span><a href="index.html#contact">Contact</a></li>

jquery函数从其他页面滚动到主页上的联系人锚点的问题：

(function($){
    var jump=function(e) {
        if (e) {
            e.preventDefault();
            var target = $(this).attr("href");
        } else {
            var target = location.hash;
        }

        $('html,body').animate({
            scrollTop: $(target).offset().top
        },1000,function() {
            location.hash = target;
        });
    }

    $('html, body').hide()

    $(document).ready(function() {
        $('a[href^=#]').bind("click", jump);

    if (location.hash) {
        setTimeout(function(){
            $('html, body').scrollTop(0).show()
            jump()
        }, 0);
    } else {
      $('html, body').show()
    }
});

我正在尝试实现与此示例类似的内容：http://vostrel.cz/so/9652944/page.html 不同之处在于，在这种情况下，“锚 id”不是出现在两个页面上，而是我的锚 id（联系人）只出现在一个页面上（家）。

【问题讨论】：

标签： jquery hyperlink smooth-scrolling

【解决方案1】：

试试这个，你的脚本没问题，只是缺少最后一行

 (function ($) {

     var jump = function (e) {
         if (e) {

             e.preventDefault();
             var target = $(this).attr("href");

         } else {

             var target = location.hash;

         }
         $('html,body').animate({

             scrollTop: $(target).offset().top

         }, 1000, function () {

             location.hash = target;

         });
     }

     $('html, body').hide();

     $(document).ready(function () {
         $('a[href^=#]').bind("click", jump);

         if (location.hash) {
             setTimeout(function () {

                 $('html, body').scrollTop(0).show()
                 jump();

             }, 0);
         } else {

             $('html, body').show();

         }
     });
 })(jQuery)

【讨论】：

【解决方案2】：

我不确定您的代码是什么，但我已经能够让它工作。一件事是，您发布的代码最后缺少})(jQuery)。不管怎样，看看我做了什么here，我想这就是你要找的。我不确定您网站的 HTML 是什么样的，但我认为您可以调整它。您需要做的就是将联系人按钮的 href 属性设置为index.html#contact。在 index.html 上，您可以只使用#contact，它会做同样的事情。

在 index.html 中，标题：

<div id="header">
    <a href="index.html">Homepage</a>
    <a href="otherpage.html">Other page</a>
    <a href="otherpage2.html">Another Page</a>
    <a href="#contact">Contact</a>
</div>

但在任何其他页面中：

<div id="header">
    <a href="index.html">Homepage</a>
    <a href="otherpage.html">Other page</a>
    <a href="otherpage2.html">Another Page</a>
    <a href="index.html#contact">Contact</a>
</div>

在 index.html 的标头中删除 index.html 可防止页面被加载两次，因此 jQuery 只需向下滚动页面。

【讨论】：

【解决方案3】：

我在测试您的代码时遇到的小提示：

因为您使用的是锚标记的 href 属性，所以它以#contact 的形式出现，jQuery 将其解释为 ID。

您需要将 id="contact" 添加到锚点才能使其正常工作，无论它位于哪个页面。

【讨论】：