使用javascript / jquery按其标题滚动到div

Question

我正在尝试滚动到由其title属性的内容标识的div。 我的follwoing结构很少：

<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按title选择div ，您需要以下选择器：

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

如此处回答： 使用jQuery按标题选择div

Answer 2

您的代码中有几个错误：

1. 您正在调用仅附加事件处理程序的onclick函数。 这意味着只有在第二次单击时，您才会滚动（并附加连续的处理程序）。 您只希望附加一个事件处理程序，并且可以在DOM加载时执行。

2. 根据您的结构，您需要通过单击的元素的内容而不是其title属性来搜索元素的标题。

3. 您正在尝试通过title属性选择一个ID（＃）的元素，而您没有。

4. $('body')内部的this现在引用body ，而不是clicked元素。

注意，您可以动态地进行所有这些附加操作，而不必复制文本。

这将为您工作：

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

（也从HTML删除onclick）

另请参阅此小提琴上的演示。