链接到其他页面-& gt; jQuery滚动到特定锚点 [英] Link to different page -> jquery scroll to specific anchor

问题描述

在我的主页的底部，我包括一个联系表，并将此部分的锚点指定为div id ="contact".

At the bottom of my home page I have included a contact form and specified the anchor for this section as div id="contact".

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

When the contact button is clicked on any page it should navigate to the homepage and on page load, scroll automatically to the contact form.

在审查了我在这里发现的类似问题之后，我未能成功使它起作用:

I've been unsuccessful in getting this to work after reviewing a similar question I found here: jQuery scroll to ID from different page When I try, it just jumps to the form. I want it to scroll smoothly.

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

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

The problem jquery function to scroll to the contact anchor on the home page from other pages:

(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(联系人)仅出现在一页(主页)上.

I'm trying to achieve something similar to this example: http://vostrel.cz/so/9652944/page.html difference being that instead of the "anchor id" in this case appearing on both pages, the anchor id (contact) for me only appears on one page (home).

推荐答案

尝试一下，您的脚本就可以了，只有最后一行丢失了

Try this, your script is OK only the last line is missing

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

这篇关于链接到其他页面-& gt; jQuery滚动到特定锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！