Scrolling to a Particular Element within a Scrolling
FIGURE 10-2
In the preceding example, you added two elements within the scrollable container, added buttons
to reference those new elements, and wired the click event of these buttons to set the scrollbar
positions of the scrollable container.
The two new
with id name container.
<div id='block1' class='block'>Block 1</div>
<div id='block2' class='block'>Block 2</div>The buttons and their containing
the status bars. The data-block attributes of these buttons were used within the click event handlers
to reference the appropriate block for the clicked button.
<div class='button-bar'>
<button class='block-button' data-block='block1'>Go to Block 1</button>
<button class='block-button' data-block='block2'>Go to Block 2</button>
</div>To set up the document for this example, you added a rule to the style sheet for the new elements. In
addition to size and spacing, the elements are set to a dark orange color to offset the fi ller text.
div.block {
margin: 10px;
padding: 5px;
width: 400px;
height: 70px;
background-color: rgb(255, 140, 0);
}In addition, you reused the status-bar style rules for the new button-bar element to maintain
consistency.
div.status-bar,
div.button-bar {
margin: 5px 20px 5px 20px;
}