Question

在我的主页底部，我已添加了一个联系表单，并将此部分的锚点指定为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（联系人）只显示在一个页面上page（home）。

Answer 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)

Answer 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只会向下滚动页面。

Answer 3

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

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

您需要在锚点上添加一个id =“contact”才能使其正常工作，无论它在哪个页面上。

链接到不同的页面 - ＆gt; jquery滚动到特定锚点

3 个答案: