Как прокрутить содержимое к определенному элементу?

skabunker ответов0 / помог0	Как прокрутить содержимое к определенному элементу? 1679833909 Всем привет! Подскажите пожалуйста, как сделать такое. У нас есть некий блок. Внутри блока ссылки, которых может быть много. У блока ограничена высота и может появляться полоса прокрутки. Вопрос: как сделать так чтобы, если внутри этого блока есть ссылка без атрибута href и если есть полоса прокрутки (тобишь элементы не влазят), содержимое автоматически прокручивалось до этой ссылки? `<div class="content"> <a href="page-1">ссылка 1</a> <a href="page-2">ссылка 2</a> <a href="page-3">ссылка 3</a> ............................................... <a>ссылка 4</a> <!-- нужно прокрутить до этой ссылки --> <a href="page-5">ссылка 5</a> <a href="page-6">ссылка 6</a> </div>` В принципе можно и без jquery, не принципиально.
drType ответов7 / помог7	1679834020 `document.querySelector(".content").scrollTop = document.querySelector( ".content a:not([href])" ).offsetTop;` skabunkersashвлепить жирный лайк
skabunker ответов0 / помог0	1679834098 drType, отличное решение подскажите еще, как сделать, чтобы эта ссылка не вверху была, а посередине блока? если конечно есть куда крутить к середине влепить жирный лайк
drType ответов7 / помог7	1679834153 skabunker, `const container = document.querySelector(".content"), item = container.querySelector("a:not([href])"); const containerRect = container.getBoundingClientRect(), itemRect = item.getBoundingClientRect(); container.scrollTop = itemRect.top - containerRect.top - (containerRect.height - itemRect.height) / 2;` skabunkersashвлепить жирный лайк
Padonak ответов1 / помог1	1680033190 Бомж-стайл вариант: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <style> .content{ max-height: 40px; max-width: 100px; overflow-y: scroll; border: 1px dashed #abc; border-right: none; } .content a{ color: crimson; text-decoration: none; cursor: pointer; } .content a[href]{ color: navy; } </style> <script> onload = function(){ document.querySelector('.content').addEventListener( 'mouseover', function(){ this .querySelector('a:not([href])') .scrollIntoView({block: 'center', behavior: 'smooth'}); }); } </script> </head> <body> <div class="content"> <a href="page-1">ссылка 1</a> <a href="page-2">ссылка 2</a> <a href="page-3">ссылка 3</a> <a>ссылка 4</a> <!-- нужно прокрутить до этой ссылки --> <a href="page-5">ссылка 5</a> <a href="page-6">ссылка 6</a> </div> </body> </html> sashвлепить жирный лайк
sash ответов0 / помог0	1680033341 Padonak, Бомж-стайл влепить жирный лайк