Прокрутите до div по своему названию, используя javascript/jquery

Question

Я пытаюсь прокрутить до div, идентифицированного по содержанию его атрибута 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

Чтобы выбрать div по title с JQuery вам нужен этот селектор:

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

, как ответил здесь: Select a div by title with jQuery

Answer 2

У вас есть несколько ошибок в коде:

1. Ты вызывая функцию onclick, которая просто присоединяет обработчик события. Это означает, что только на вашем втором клике вы будете прокручиваться (а также присоединяться последовательные обработчики). Вы хотите только подключить один обработчик событий, и вы можете сделать это при загрузке DOM.

2. Согласно вашей структуре, вам нужно найти заголовок элемента по адресу вашего элемента clicked, а не его атрибуту title.

3. Вы пытаетесь выбрать элемент с идентификатором (#) атрибутом title, которого у вас нет.

4. this внутри $('body') теперь относится к body, а не к элементу с щелчком.

Примечание вы можете сделать все эти крепления динамически, а не дублировать свои тексты.

Это будет работать для вас:

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

(Удалить OnClick из вашего HTML, а)

Также см демонстрацию на этой Fiddle.