链接到不同的页面 ->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"不是出现在两个页面上，而是我的锚 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屋！