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

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

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

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

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

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

-или-

2. Для перехода к анкерному тегу внутри DIV, и отменить этот процесс до его воздействует на организм.

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

Вот некоторые дополнительные ссылки на подобные вопросы, может иметь некоторые идеи, которые вы могли бы работать с: кажется перспективным, не мог заставить его работать Scrolling within a div without moving page

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

других идей для подобных проблем How to prevent page scrolling when scrolling a DIV element?

How to go to anchor tag in scrollable div without having the whole browser jump down?

How can I differentiate a manual scroll (via mousewheel/scrollbar) from a Javascript/jQuery scroll?

другие подходы к аналогичному вопросу HTML anchor link with no scroll or jump

Вот пример 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; 
}

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

источник

2015-07-03 AxeChops

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

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

Here is a fiddle of it working
Я использовал якорные теги, чтобы найти его, но вы можете использовать что-либо с идентификатором.

источник

2015-07-03 13:43:15 Chris

Интересно. Будет ли этот ScrollTop работать для примера html? Это два divs рядом друг с другом с содержащим их div, а затем оконным div, который показывает только один из бок о бок divs за раз. Когда щелкнута ссылка в левом div, она прокручивается до якоря в правом div. Единственная проблема заключается в том, что главное окно также переходит к привязке, только то, что находится в div, должно прокручиваться, или тело может быть заблокировано. Можно ли сделать это только с помощью JavaScript? – AxeChops

Он должен работать с прямым javascript, если вы не используете привязки. Похоже, что в источнике [JQuery] (http://code.jquery.com/jquery-1.11.3.js) используется метод прокрутки Javascript. – Chris

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

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

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

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

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

источник

2015-08-23 06:22:27 user3094755

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

ответ

Смежные вопросы