链接到不同的页面 - > 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.

我在审核后无法成功运行我在这里找到一个类似的问题： jQuery滚动到不同页面的ID 当我尝试，它只是跳转到表单。我希望它能够顺畅滚动。

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，锚号（联系人）对我来说只出现在一个页面上（主页）。

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)

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