Menu
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?
559
To fit all the text inside the div, the single-direction scrolling method will be used. You can apply it by placing the overflow-y:scroll in the id growth inside the style tag. Notice the scroll bar on the right side of the div .
You can put an anchor tag inside of the divs... make it the last element in the divs, and style it to be display block, and to fill up 100% width and height (you may need to specify the height).
You can use window. scroll() with behavior: smooth and top set to the anchor tag's offset top which ensures that the anchor tag will be at the top of the viewport.
The easiest way to to make the browser to scroll the page to a given anchor is to add *{scroll-behavior: smooth;} in your style. css file and in your HTML navigation use #NameOfTheSection .
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.
97
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
