Question

我使用以下滚动功能滚动到我页面中的锚点

$(function() {
  $('.hashscroll-main').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 -120
        }, 1000);
        return false;
     }
    }
  });
});

到目前为止这很好。

然后我使用了一个始终打开的bootstrap模式，在主页面中有一个滚动的winodw。这种模式具有自己的锚点导航功能。所以我想用以下代码滚动到模态窗口中的锚点

$(function() {
  $('.hashscroll').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) {
        $('.modal-body').animate({
          scrollTop: target.offset().top 
        }, 1000);
         return false;
      }
    }
  });
});

这个结果是模态中的滚动到达模态窗口的末尾而不是所需的锚点。

我的模态html的开头看起来像这样

<div class="modal hide fade" id="open">
        <div class="nav" style="display:block !important; position:absolute; top:0;">
            <ul class="ship">
                <li><a href="#taras1" class="nav-active hashscroll">MS Taras</a></li>
                <li class="separator">|</li>
                <li><a href="#boreas" class="hashscroll">MS Boreas</a></li>
                <li class="separator">|</li>
                <li><a href="#stanserhorn" class="hashscroll">MS Stanserhorn</a></li>
                <li class="separator">|</li>
                <li><a href="#pegasus" class="hashscroll">MS Pegasus</a></li>
                <li class="separator">|</li>
                <li><a href="#triton" class="hashscroll">MS Triton</a></li>
                <li class="separator">|</li>
                <li><a href="#galibu" class="hashscroll">Galibu</a></li>
                <li class="separator">|</li>
                <li><a href="#silas1" class="hashscroll">Silas</a></li>
            </ul>
        </div>

        <div class="modal-body">
            <div id="taras1">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>

任何提示我做错了什么？

Answer 1

使用target.offset().top时，您还需要考虑模式的位置。

这意味着您计算目标的偏移顶部并减去滚动容器的偏移顶部。

例如：

var modalBody = $('.modal-body');
modalBody.animate({
  scorllTop: target.offset().top - modalBody.offset().top
}, 1000);

请参阅this issue。

在页面和模态上滚动

1 个答案: