Question

我在Google地图信息窗口中有一个指向页面锚点的链接。问题是它不会平滑滚动到这个锚，它只是跳跃。平滑滚动适用于我页面上的所有其他链接。我认为这种情况正在发生，因为这些特定的链接不是来自HTML，而是通过谷歌地图代码放在那里，因此脚本没有注意到。

这是我的谷歌地图代码中生成链接的部分 -

[   '<div id="infoboxcontent">' +
        '<a href ="#project1"><h4>Project 1</h4>' +
        '<p>Description</p></a>' +
        '</div>'    
    , -33.890542, 151.274856],

这是我从css-tricks中使用的平滑滚动脚本

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname     == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

这里有人可以帮助我吗？提前谢谢

Answer 1

这是因为当您调用平滑滚动脚本（文档就绪）时，尚未创建infowindow链接。

在函数中包裹平滑滚动代码。例如：

function smoothScroll() {

    $('a[href*=#]:not([href=#])').click(function () {
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
}

从文档就绪声明中调用该函数：

$(function() {

    smoothScroll();
});

在infowindow的domready事件上添加一个监听器，然后从那里再次调用该函数：

google.maps.event.addListener(infowindow, 'domready', function () {

    smoothScroll();
});

您可能希望调整smoothScroll函数，以便将范围作为参数（以避免再次重新处理所有其他链接......）。

Answer 2

尝试修改脚本以使用jQuery on() function。

，而不是添加侦听器

jQuery( document ).ready(function() {
    jQuery(function() {
      jQuery(document.body).on('click','a[href*=#]:not([href=#])',function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = jQuery(this.hash);
          target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            jQuery(target).addClass("target");
            jQuery('html,body').animate({
              scrollTop: target.offset().top
            }, 1000,'swing',function(){jQuery(target).removeClass("target");});
            return false;
          }
        }
      });
    }); 
});

从谷歌地图信息窗口内的链接发出平滑滚动到页面锚点

2 个答案: