Как использовать тег привязки для прокрутки в div, без автопрокрутки всей страницы?

Я хотел бы использовать якорные теги для прокрутки внутри div на веб-странице. Однако, когда я нажимаю на тег привязки, вся страница переходит на тег привязки внутри div.

Содержимое внутри div должно прокручиваться, без прокрутки тела веб-страницы.

Я гуглил и пытался выяснить это неделями и пока не нашел приемлемого решения. Кажется, это действительно часто задаваемый вопрос.

Я очень мало знаю о javascript, но из того, что я собираю, кажется, есть два возможных способа сделать это:

1. Сделать тело страницы прокручиваемым только колесиком мыши / вручную, а не с помощью тегов привязки. Это касается только тела, а не других элементов.

-или же-

2. Прокрутите до тега привязки в элементе div и отмените процесс, прежде чем он повлияет на тело.

Бонус был бы, если бы он не добавил тег привязки к URL.

Вот некоторые дополнительные ссылки на похожие вопросы, могут быть некоторые идеи, с которыми вы могли бы поработать: кажется многообещающим, не может заставить его работать Прокрутка внутри div без перемещения страницы

использует event.preventDetfault() или event.returnValue = false может работать для тела после прокрутки ссылки привязки вправо http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-to-the-top/

другие идеи для подобных проблем Как предотвратить прокрутку страницы при прокрутке элемента DIV?

Как перейти к тегу привязки в прокручиваемом элементе div, не опустив весь браузер?

Как можно отличить ручную прокрутку (с помощью колесика мыши / полосы прокрутки) от прокрутки Javascript/jQuery?

другие подходы к аналогичному вопросу HTML-якорная ссылка без прокрутки или перехода

Вот пример HTML и CSS с соответствующими элементами. Вы можете изменить размер окна браузера, чтобы на главной странице была полоса прокрутки, чтобы увидеть нежелательный эффект автопрокрутки:

<html>
<body>
<div id="main">
<div id="mainwide">
<div id="left">
<a href="#2">2</a>
</div>
<div id="right">
<a id="link" name="2">2</a>
</div>
</div>
</div>
</body>
</html>

Вот CSS

html {
background-color: LightGreen;
}
#main {
border: 1px solid black;
margin-top: 200px;
width: 500px;
height: 300px;
overflow: hidden;
}
#mainwide {
width: 1000px;
height: 300px;
}
#left {
background-color: MediumSpringGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
#right {
background-color: MediumSeaGreen;
width: 500px;
height: 300px;
float: left;
display: inline;
}
a#link {
float: right;
margin: 0;
padding: 0;
}

Может быть, вы можете получить несколько баллов за окончательный ответ на этот часто задаваемый вопрос?

Источник

2 ответа

Вы можете использовать функцию scrollTop из Jquery, чтобы расположить прокручиваемый div в точности так, как вы этого хотите.

$( "#viv_button" ).click(function() {
    var container = document.getElementById('col2'); 
    var scrollTo = document.getElementById('viv');
    container.scrollTop = scrollTo.offsetTop;
});

Вот скрипка это работает
Я использовал теги привязки, чтобы найти его, но вы можете использовать что угодно с идентификатором.

Источник

Я обнаружил, что это произошло, потому что был родитель элемента, в котором у вас есть href='#id_of_element'.

Чтобы исправить это....

// javascript
document.body.position = 'absolute';

// or css
.body {
    position: absolute; 
}

Вы можете использовать фиксированный или относительный. Но это останавливает прокрутку тела (главной страницы) при выборе href где-то внутри дочернего элемента.

Источник
Другие вопросы по тегам