html - 打开模式并滚动到特定 DIV

Question

我有一个可打开模式窗口的链接。
我想打开模式窗口并滚动到其中的特定 DIV。

HTML:

<a href="#teamMembers" data-toggle="modal" class="teamMemebrScroll1">read more</a>
<a href="#teamMembers" data-toggle="modal" class="teamMemebrScroll2">read more</a>
<a href="#teamMembers" data-toggle="modal" class="teamMemebrScroll3">read more</a>

<div class="portfolio-modal modal fade" id="teamMembers" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
      <div class="container" data-id="teamMemebrScroll1">....</div>
      <div class="container" data-id="teamMemebrScroll2">....</div>
      <div class="container" data-id="teamMemebrScroll3">....</div>
</div>

JS:

// scroll to team member 2
jQuery(document).ready(function ($) {
  $(".teamMemebrScroll2").click(function (event) {
      event.preventDefault();
      $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000);
  });
});

模式正确打开，但它总是滚动到顶部。

Answer 1

1. 在您的方法中，您的目标是 $('html,body') 但您希望在模式打开时滚动到模式内的内容，因此应该是 $('modalselector' )
2. 您正在尝试创建多个您不需要的click 事件，但可以使用BS modal event function 获得相同的结果。通过在模式触发按钮中添加附加数据属性。

对模态触发按钮进行了一些更改，添加了数据属性 data-id 并且在尝试时不需要 click 事件。

<a href="#teamMembers" data-toggle="modal" data-id="teamMemebrScroll1" class="teamMemebrScroll1">read more</a>
<a href="#teamMembers" data-toggle="modal" data-id="teamMemebrScroll2" class="teamMemebrScroll2">read more</a>
<a href="#teamMembers" data-toggle="modal" data-id="teamMemebrScroll3" class="teamMemebrScroll3">read more</a>

和BS模态事件函数

$('#teamMembers').on('shown.bs.modal', function (e) {
    //alert('modal shown');
    var id = $(e.relatedTarget).data('id'); // <--fetch modal button data-id when modal shown
});

由于您已经将数据属性 data-id 添加到模态内的元素

  <div class="container" data-id="teamMemebrScroll1">....</div>
  <div class="container" data-id="teamMemebrScroll2">....</div>
  <div class="container" data-id="teamMemebrScroll3">....</div>

因此只需将模式按钮 data-id 与模式内的元素 data-id 相匹配，并在模式打开时滚动到它

$(document).ready(function () {
        $('#teamMembers').on('shown.bs.modal', function (e) {
        var id = $(e.relatedTarget).data('id'); // Modal button data-id
        var team = $('.container[data-id="' + id + '"]'); // Element data-id with match the Modal button data-id
        $(this).animate({ // Modal
            scrollTop: team.offset().top // Scroll to the element
        }, 1000);
    });
});

Fiddle Working Example

---

如果您想使用上述方法更好地控制滚动，早先我发现了一个非常小的脚本，它做得更好一些。检查以下内容

Fiddle with Scroll Top plugin