Question

我正在尝试滚动到由其title属性的内容标识的div。我有几个div与下面的结构：

<div class="placementWrapper">
   <h3 class="placementName" title="above-content">above-content</h3>
</div>

和一个包含以下代码的按钮：

<ul id="placemetnsList" class="dropdown-menu pull-right">
    <li><a class="toPlacement" onclick="scrollToPlacement('above-content')">above-content</a></li>
    <li><a onclick="scrollToPlacement('mobile_takeover')">mobile_takeover</a></li>
    <li><a onclick="scrollToPlacement('mobile_toaster')">mobile_toaster</a></li>
</ul>

scrollToPlacement(placementName)应该如何实现？

我尝试使用此代码：

  function scrollToPlacement(placementName){
    $(".toPlacement[title]").click(function() {
      $('body').animate({scrollTop: $("#" + $(this).attr('title')).offset().top - 10}, "slow");
        return false;
      });
    }

但没有工作......任何想法为什么？

Answer 1

要使用jQuery选择div title，您需要使用此选择器：

$("div[title=\"the-title\"]")

在这里回答：Select a div by title with jQuery

Answer 2

您的代码中有几个错误：

您正在调用只附加事件处理程序的onclick函数。这意味着只有在第二次单击时才会滚动（并且还会连接连续的处理程序）。您只想附加一个事件处理程序，并且可以在DOM加载时执行它。
根据您的结构，您需要通过所点击元素的内容搜索元素标题，而不是搜索其标题属性。
您正试图通过title属性选择ID（＃）的元素，而您没有。
this内$('body')现在引用body，而不是点击的元素。

请注意，您可以动态执行所有这些操作，而不是复制文本。

这对你有用：

$(".toPlacement").on('click', function() {
   var titleText = $(this).text();
   $('body').animate({scrollTop: $(".placementName[title='" + titleText + "']").offset().top - 10}, "slow");
   return false;
});

（也从HTML中删除onclick）

另见Fiddle的演示。

使用javascript / jquery滚动到div的标题

2 个答案: