Question

我想要我的

div="#course_navigation"

在我的侧栏中用这个css：

.sidebar #course_navigation {
    max-height: 700px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

在页面加载时滚动到此类：

.learndash-current-menu-item

我试试这个，但没有任何反应：

$('#course_navigation').scrollTo('.learndash-current-menu-item');

我尝试了很多其他代码，没有成功。不知道问题是什么。

The structure looks like this:

也许我不够具体，所以我再说一遍：

#course_navigation

可滚动。

我需要滚动#course_navigation，直到.learndash-current-menu-item可以在页面加载的#course_navigation的顶部或中心看到。

我在主题空间领域/ head：

之前有这个

<script src="code.jquery.com/jquery-1.10.2.js"></script>;

我把脚本放在Space之前/ body就像这样：

<script>$('#course_navigation').scrollTo('.learndash-current‌-menu-item');</scrip‌t>

没有成功，没有任何反应，没有一个解决方案有效......

请用JS或jquery帮助我。最好的方法是将元素滚动到div的中心。

提前谢谢！

安德拉什

Answer 1

尝试

$(document).on('click', '#course_navigation', function(){
    $('html, body').animate({
        scrollTop: $(".learndash-current-menu-item").offset().top
    }, 1000);
});

这将滚动到您的元素，持续时间为1秒。

以下是代码说明：

首先，通过将代码绑定到文档，而不是简单地绑定到元素，我们确保在替换原始元素（当然具有相同id的元素）之后代码仍然有效。这称为event delegation，虽然对您来说不是必需的，但它总是很好用。
然后我们创建一个在您单击元素时触发的函数（这是您错过的最重要的部分）。点击div#course_navigation将执行您在function()代码中找到的行。
该函数使用jQuery animate滚动到您想要的元素的顶部位置。它需要两个参数：第一个如果你想做什么（转到所需元素的顶部位置）;第二个告诉你动画应该运行多久（以毫秒为单位，因此对于1000，动画需要一秒钟才能完成，页面才能到达它的新位置）。

Answer 2

试试这段代码

＆＃13;

$('html, body').animate({
  'scrollTop': $("#course_navigation").position().top
});

＆＃13;

.sidebar #course_navigation {
  max-height: 700px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="#course_navigation1">
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
  <p>test test test test test test test </p>
</div>
<div id="course_navigation">test</div>

＆＃13;

Answer 3

这适合我。

$(window).scrollTop($('.learndash-current-menu-item').offset().top);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div id="course_navigation">
Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/> Some text here <br/>
<div class="learndash-current-menu-item">
   <h1>Scrool to me</h1>
</div>
Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>Some text here <br/> Some text here <br/>
</div>

</div>

滚动到div

3 个答案: