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

在您的方法中，您定位$('html,body')，但是当模态打开时您想要滚动到模态内的内容，因此它应该是$('modalselector')

您正在尝试创建多个不需要的click个事件，并且可以通过在模态触发按钮中添加附加data attributes来BS modal event function来实现相同的结果。< / LI>

在模态触发按钮中进行了一些更改，添加了数据属性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

Answer 2

尝试打开窗口时，首先要做的就是链接。此链接转到特定的div＆＃34; teamMembers＆＃34;

<a href="#TeamMembers" ... />

在您的窗口上使用Php，如下所示：

<?php
   header('Location: #TeamMembers');
?>

打开模态并滚动到特定的DIV

2 个答案: