troubleshooting Question

jQuery: Scroll paragraph contents to specific element

Avatar of hankknight
hankknightFlag for Canada asked on
JavaScript
6 Comments2 Solutions457 ViewsLast Modified:
Using jQuery, I want to scroll the contents of a paragraph so that a specific element is at the top.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo</title>
<style type="text/css">

h1 {
text-align: center;
}

div p {
margin: 40px auto 0 auto;
width: 300px;
height: 200px;
overflow: auto;
border: 2px solid #333;
}

a {
color: blue;
cursor: pointer;
text-decoration: underline;
display: block;
font-size: 15px;
line-height: 22px;
}

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('#goto3').click(function() {
	alert('Scroll the contents of the box so that "Hello 3" is at the top of the box.');
     });

});
</script>
</head>
<body>

<h1>Hello</h1>
<div>
 <p>
 <a id="hello1">Hello 1</a> Test
 <a id="hello2">Hello 2</a> Test
 <a id="hello3">Hello 3</a> Test
 <a id="hello4">Hello 4</a> Test
 <a id="hello5">Hello 5</a> Test
 <a id="hello6">Hello 6</a> Test
 <a id="hello7">Hello 7</a> Test
 <a id="hello8">Hello 8</a> Test
 <a id="hello9">Hello 9</a> Test
 </p>
</div>
<p><a id="goto3">Show "Hello 3" at top of box</a></p>
</body>
</html>
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 2 Answers and 6 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 6 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros