Нужна помощь с функцией
Создал страницу со статьями где есть заголовок и сама тема. По нажатию на заголовок нужно найти нужную тему, реализуется это таким образом, что Заголовок и Тема по названию одинаковы.
<p href="#" onclick="beerequipment('Тема 1')" >Тема 1</p>
Это код в HTML.Мне нужно передать слово Тема 1 и функцию и найти в тексте это слово
function beerequipment() {
$(window).scrollTop($("h2:contains(Тема 1):last").offset().top);
}
И желательно нужно вместо последнего встречающего слово, найти первое
Ответы (2 шт):
Автор решения: Алексей
→ Ссылка
$(document).ready(function () {
$('p').click(function () {
const text = $(this).text();
$(window).scrollTop($(`h2:contains(${text}):eq(0)`).offset().top);
});
});h2 {
margin-top: 500px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Тема 1</p>
<p>Тема 2</p>
<p>Тема 3</p>
<h2>Тема 1</h2>
<h2>Тема 1</h2>
<h2>Тема 1</h2>
<h2>Тема 1</h2>
<h2>Тема 2</h2>
<h2>Тема 3</h2>
<h2>Тема 3</h2>
Автор решения: Daniil Loban
→ Ссылка
На мой взгляд, то что Вы пытаетесь решить кодом, давно имеет решение средствами html. Называется это якорь. Cуть якоря такова что мы можем создать ссылку на определенное место на странице для навигации к нему.
Ссылка создается как обычная ссылка но с хэш символом перед именем якоря ( разумеется ее можно стилизовать через css под обычный текст если есть такая необходимость ), в данном случае ссылка указывает на ту же страницу:
<a href="#head1">Ссылка на раздел первого заголовка</a>
для указания на другую страницу можно использовать подобное решение
<a href="/page2/#head1">Ссылка на раздел первого заголовка</a>
что касается якоря то можно использовать простой id элемента, при правильной верстке это значение уникально, таким образом для указанной выше ссылки мы можем использовать:
<h3 id="head1">Первый заголовок</h3>
так же допускается использовать аттрибут name в обычной ссылке, c пустым содержимым, например так:
<a name="head1"></a>
<ul>
<li><a href="#head1">Ссылка на раздел первого заголовка</a></li>
<li><a href="#head2">Ссылка на раздел второго заголовка</a></li>
<li><a href="#head3">Ссылка на раздел третьего заголовка</a></li>
</ul>
<h3 id="head1">Первый заголовок</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum urna sapien, non pellentesque nisi tristique ac. Ut non aliquet ex, interdum sagittis massa. Vivamus quis mi sit amet nisi rutrum mollis gravida ac magna. Donec volutpat condimentum risus at vestibulum. Duis vulputate, leo eget volutpat eleifend, diam neque aliquet arcu, a efficitur nunc erat non magna. Curabitur lacus mi, iaculis quis tristique ut, placerat ac enim. Pellentesque lacus libero, egestas ac libero sodales, gravida suscipit sem. Sed eget vulputate nisl.
Etiam quam erat, viverra sit amet magna nec, eleifend sagittis dolor. In sed auctor ex. Donec fringilla nisi semper metus aliquam, nec interdum urna fringilla. Duis convallis leo lectus, et gravida magna tristique ac. Fusce eget felis et odio aliquet pharetra. Aliquam egestas tortor vel lacus fringilla, at eleifend ligula laoreet. Duis non libero vel tellus scelerisque ullamcorper eu maximus magna.
Curabitur dui magna, mollis in convallis et, cursus eu tortor. In finibus elit ac elit interdum interdum. Etiam ut sapien sed justo ullamcorper elementum. Praesent et varius erat, eu vehicula augue. Vestibulum aliquet velit imperdiet, pharetra nisi sit amet, venenatis quam. Etiam iaculis consectetur lorem ut placerat. Cras ac congue enim, eget consectetur libero. Quisque tempus purus sed mauris fermentum, ut auctor purus molestie.
Aliquam fermentum eget neque ac tempor. Fusce felis enim, laoreet et nulla sit amet, facilisis posuere mi. Morbi facilisis vel augue quis ornare. Mauris et ligula sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer condimentum ex et nibh varius, in sagittis arcu luctus. Nunc urna quam, semper in imperdiet eu, porta et metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum condimentum velit, mattis aliquam ipsum vulputate nec. Integer id neque malesuada, tempus urna nec, malesuada sapien. Mauris quis vestibulum odio, eget ultrices diam. Vestibulum molestie leo sagittis, gravida dolor ut, condimentum diam. Suspendisse potenti. Aenean vitae vehicula velit. In purus lectus, suscipit a euismod quis, tempor eget eros.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae enim a ipsum iaculis lacinia. Vivamus pulvinar consectetur augue, et semper tortor efficitur ut. Sed sodales nec ex sed aliquet. Praesent sit amet feugiat diam, vitae lacinia elit. Phasellus eget congue enim, eu hendrerit tellus. Cras tempus scelerisque ex, non vestibulum felis blandit nec. Morbi consectetur sapien orci, quis pellentesque risus tincidunt luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<h3 id="head2">Второй заголовок</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum urna sapien, non pellentesque nisi tristique ac. Ut non aliquet ex, interdum sagittis massa. Vivamus quis mi sit amet nisi rutrum mollis gravida ac magna. Donec volutpat condimentum risus at vestibulum. Duis vulputate, leo eget volutpat eleifend, diam neque aliquet arcu, a efficitur nunc erat non magna. Curabitur lacus mi, iaculis quis tristique ut, placerat ac enim. Pellentesque lacus libero, egestas ac libero sodales, gravida suscipit sem. Sed eget vulputate nisl.
Etiam quam erat, viverra sit amet magna nec, eleifend sagittis dolor. In sed auctor ex. Donec fringilla nisi semper metus aliquam, nec interdum urna fringilla. Duis convallis leo lectus, et gravida magna tristique ac. Fusce eget felis et odio aliquet pharetra. Aliquam egestas tortor vel lacus fringilla, at eleifend ligula laoreet. Duis non libero vel tellus scelerisque ullamcorper eu maximus magna.
Curabitur dui magna, mollis in convallis et, cursus eu tortor. In finibus elit ac elit interdum interdum. Etiam ut sapien sed justo ullamcorper elementum. Praesent et varius erat, eu vehicula augue. Vestibulum aliquet velit imperdiet, pharetra nisi sit amet, venenatis quam. Etiam iaculis consectetur lorem ut placerat. Cras ac congue enim, eget consectetur libero. Quisque tempus purus sed mauris fermentum, ut auctor purus molestie.
Aliquam fermentum eget neque ac tempor. Fusce felis enim, laoreet et nulla sit amet, facilisis posuere mi. Morbi facilisis vel augue quis ornare. Mauris et ligula sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer condimentum ex et nibh varius, in sagittis arcu luctus. Nunc urna quam, semper in imperdiet eu, porta et metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum condimentum velit, mattis aliquam ipsum vulputate nec. Integer id neque malesuada, tempus urna nec, malesuada sapien. Mauris quis vestibulum odio, eget ultrices diam. Vestibulum molestie leo sagittis, gravida dolor ut, condimentum diam. Suspendisse potenti. Aenean vitae vehicula velit. In purus lectus, suscipit a euismod quis, tempor eget eros.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae enim a ipsum iaculis lacinia. Vivamus pulvinar consectetur augue, et semper tortor efficitur ut. Sed sodales nec ex sed aliquet. Praesent sit amet feugiat diam, vitae lacinia elit. Phasellus eget congue enim, eu hendrerit tellus. Cras tempus scelerisque ex, non vestibulum felis blandit nec. Morbi consectetur sapien orci, quis pellentesque risus tincidunt luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
<h3 id="head3">Третий заголовок</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum urna sapien, non pellentesque nisi tristique ac. Ut non aliquet ex, interdum sagittis massa. Vivamus quis mi sit amet nisi rutrum mollis gravida ac magna. Donec volutpat condimentum risus at vestibulum. Duis vulputate, leo eget volutpat eleifend, diam neque aliquet arcu, a efficitur nunc erat non magna. Curabitur lacus mi, iaculis quis tristique ut, placerat ac enim. Pellentesque lacus libero, egestas ac libero sodales, gravida suscipit sem. Sed eget vulputate nisl.
Etiam quam erat, viverra sit amet magna nec, eleifend sagittis dolor. In sed auctor ex. Donec fringilla nisi semper metus aliquam, nec interdum urna fringilla. Duis convallis leo lectus, et gravida magna tristique ac. Fusce eget felis et odio aliquet pharetra. Aliquam egestas tortor vel lacus fringilla, at eleifend ligula laoreet. Duis non libero vel tellus scelerisque ullamcorper eu maximus magna.
Curabitur dui magna, mollis in convallis et, cursus eu tortor. In finibus elit ac elit interdum interdum. Etiam ut sapien sed justo ullamcorper elementum. Praesent et varius erat, eu vehicula augue. Vestibulum aliquet velit imperdiet, pharetra nisi sit amet, venenatis quam. Etiam iaculis consectetur lorem ut placerat. Cras ac congue enim, eget consectetur libero. Quisque tempus purus sed mauris fermentum, ut auctor purus molestie.
Aliquam fermentum eget neque ac tempor. Fusce felis enim, laoreet et nulla sit amet, facilisis posuere mi. Morbi facilisis vel augue quis ornare. Mauris et ligula sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer condimentum ex et nibh varius, in sagittis arcu luctus. Nunc urna quam, semper in imperdiet eu, porta et metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec vestibulum condimentum velit, mattis aliquam ipsum vulputate nec. Integer id neque malesuada, tempus urna nec, malesuada sapien. Mauris quis vestibulum odio, eget ultrices diam. Vestibulum molestie leo sagittis, gravida dolor ut, condimentum diam. Suspendisse potenti. Aenean vitae vehicula velit. In purus lectus, suscipit a euismod quis, tempor eget eros.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae enim a ipsum iaculis lacinia. Vivamus pulvinar consectetur augue, et semper tortor efficitur ut. Sed sodales nec ex sed aliquet. Praesent sit amet feugiat diam, vitae lacinia elit. Phasellus eget congue enim, eu hendrerit tellus. Cras tempus scelerisque ex, non vestibulum felis blandit nec. Morbi consectetur sapien orci, quis pellentesque risus tincidunt luctus. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>