How to use anchor tag to scroll within div, without autoscrolling entire page?
Question
I would like to use anchor tags to scroll within a div on the webpage. However, when I click on the anchor tag, the entire page jumps to the anchor tag within the div.
The content within the div should scroll, without the body of the webpage autoscrolling.
I've been googling and trying to figure this out for weeks & have not yet found an acceptable solution. It seems to be a really commonly asked question, too.
I know very little about javascript, but from what I gather there seem to be two possible ways of accomplishing this:
1. To make the body of the page scrollable only by mousewheel/manually and not with anchor tags. This would apply to the body only and not other elements.
-or-
2. To scroll to the anchor tag within the div, and cancel the process before it affects the body.
A bonus would be if it did not add the anchor tag to the url.
Here are some additional links to similar questions, may have some ideas you could work with: seems promising, could not get it to work Scrolling within a div without moving page
uses event.preventDetfault() or event.returnValue = false may work for body after anchor link scroll to right http://js-unit-testing.com/2013/08/08/preventing-anchor-clicking-from-scrolling-to-the-top/
other ideas for similar problems 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?
other approaches to similar question HTML anchor link with no scroll or jump
Here is a sample HTML and CSS with the relevant elements. You may resize the browser window so that there is a scrollbar for the main page to see the undesirable autoscroll effect:
<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>
Here is the 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;
}
Maybe you can gain some points for definitively answering this commonly asked question?
2 answers
solution1
6 2015-07-03 13:43:15
You can use the scrollTop function from Jquery to position the scrollable div exactly how you want it.
$( "#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
I used anchor tags to locate it, but you can use anything with an ID.
solution2
0 2015-08-23 06:22:27
I found this occurred because there was a parent of the element within which you have your href='#id_of_element'.
To fix this....
// javascript
document.body.position = 'absolute';
// or css
.body {
position: absolute;
}
You could use fixed, or relative. But this stops the body ( main page ) from scrolling on selection of href somewhere within a child element.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.