9

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?

Community
  • 1
  • 1
AxeChops
  • 91
  • 1
  • 1
  • 5

2 Answers2

8

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.

Chris
  • 4,425
  • 5
  • 34
  • 49
  • Interesting. Would this ScrollTop work for the html example? It is two divs next to each-other with a div containing them, and then a window div that only shows one of the side-by-side divs at a time. When the link in the left div is clicked, it scrolls to the anchor in the right div. The only problem is that the main window also jumps to the anchor, only what is in the div should scroll, or the body could be locked. Is it possible to do this with only JavaScript? – AxeChops Jul 03 '15 at 14:12
  • It should work with straight javascript if you don't use anchors. It looks like in the [JQuery source](http://code.jquery.com/jquery-1.11.3.js) that they are using the Javascript scrollTo method. – Chris Jul 06 '15 at 12:47
  • I have a similar unresolved issue but not sure if I should open a new question or try to work it via this question. Thoughts before I proceed? – user2140857 Jul 22 '19 at 20:17
  • 1
    why always jQuery answer to non jQuey question? Those should be banned. – The Fool Mar 14 '20 at 09:53
  • 1
    @TheFool honestly agreed but this is an answer from 2015, when JQuery and web development were pretty synonymous – Chris Sandvik Jul 06 '21 at 18:36
  • This answer uses a Jquery event binding, but the `scrollTop` property is just vanilla Javascript. It's not the "scrollTop function from Jquery" mentioned in the answer here. (that method *does* exist, but it's not being used here) – Skeets May 25 '22 at 00:56
0

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.

user3094755
  • 1,561
  • 16
  • 20