Ссылка при прокрутке клика в целевой div без прокрутки всего тела, javascriptCSS

Разбираемся в CSS
Ответить
Anonymous
 Ссылка при прокрутке клика в целевой div без прокрутки всего тела, javascript

Сообщение Anonymous »

когда я нажимаю ссылку определенного раздела в link_div, я хочу прокрутить раздел content_div.
Я пробую использовать JavaScript, но не могу правильно с этим справиться. этот свиток со всем телом.
моя страница такая

header/navbar
hero section


  • Section 1
  • Section 2
  • Section 3
  • Section 4
  • Section 5







Я использую методы JavaScript, такие как — ScrollTo, ScrollBy, ScrollIntoView, но никто не может работать правильно

function showSection(sectionId) {
var targetSection = document.getElementById(sectionId);
var contentDiv = document.getElementById('content_div');

if (targetSection && contentDiv) {
var contentDivRect = contentDiv.getBoundingClientRect();
var sectionRect = targetSection.getBoundingClientRect();
var scrollPosition = sectionRect.top - contentDivRect.top + contentDiv.scrollTop;
window.scrollTo(0, scrollPosition);

}
}

Вот фрагмент:


function showSection(sectionId) {
var targetSection = document.getElementById(sectionId);
var contentDiv = document.getElementById('content_div');

if (targetSection && contentDiv) {
var contentDivRect = contentDiv.getBoundingClientRect();
var sectionRect = targetSection.getBoundingClientRect();
var scrollPosition = sectionRect.top - contentDivRect.top + contentDiv.scrollTop;
window.scrollTo(0, scrollPosition);

}
}

header/navbar
hero section


  • Section 1
  • Section 2
  • Section 3
  • Section 4
  • Section 5









Я тоже пробую это-
function showSection(sectionId) {
var selectedSection = document.getElementById(sectionId);
if (selectedSection) {
const scrollOffset = targetElement.offsetTop - scrollableDiv.offsetTop;
scrollableDiv.scrollTop = scrollOffset;
selectedSection.scrollIntoView({ behavior: 'smooth' });
}
}


Подробнее здесь: https://stackoverflow.com/questions/784 ... javascript
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»