How do I smooth scroll to different spans in the middle of a div
Question
I have a div with many spans inside of it. There many br's in between the spans. Each span has an id.
I am making several lines of text where each letter is in a span and each line ends with a line break to make lines of text. I would like to be able to scroll to any span and place it in the middle of the parent div vertically.
I am able to scroll so that the correct span is always in the middle of the div (see the jsfiddle here ). The problem is that it is not a smooth scroll. Moving from line to line can be quite jarring.
How can I make this a smooth scroll? I can use JQuery if need be (but I would prefer not to if that is possible). Remember, my goal is to have the selected span to always show up in the middle of the parent div and be able to smooth scroll from one span to another.
<!DOCTYPE html>
<html lang="en">
<head>
<style>
#theDiv {
height: 75px;
width: 100px;
overflow: auto;
}
</style>
<script>
function scroll() {
//the user supplied span id
var spanId = document.querySelector("#rowColInput").value;
//get the span where we want to scroll to
var codeElement = document.querySelector("#" + spanId);
//get the container and owner of the scroll bars
var scrollableContainer = document.querySelector("#theDiv");
//get the height of the owner of the scrollbars, #theDIv
var scrollableContainerHeight = scrollableContainer.clientHeight;
//get the distance from the top edge of the parent, scrollableContainer,
var offsetTop = codeElement.offsetTop
//get the amount of pixels that the element is underneath the scrollableContainer's height
var diff = offsetTop - scrollableContainerHeight;
//scroll so that the span is in the middle of the div
scrollableContainer.scrollTop = diff + (scrollableContainerHeight / 2);
}
</script>
</head>
<body>
<div id="theDiv">
<span id="r1c1">l</span><span id="r1c2">i</span><span id="r1c3">n</span><span id="r1c4">e</span><span id="r1c5"> </span><span id="r1c6">1</span><br/>
<span id="r2c1">l</span><span id="r2c2">i</span><span id="r2c3">n</span><span id="r2c4">e</span><span id="r2c5"> </span><span id="r2c6">2</span><br/>
<span id="r3c1">l</span><span id="r3c2">i</span><span id="r3c3">n</span><span id="r3c4">e</span><span id="r3c5"> </span><span id="r3c6">3</span><br/>
<span id="r4c1">l</span><span id="r4c2">i</span><span id="r4c3">n</span><span id="r4c4">e</span><span id="r4c5"> </span><span id="r4c6">4</span><br/>
<span id="r5c1">l</span><span id="r5c2">i</span><span id="r5c3">n</span><span id="r5c4">e</span><span id="r5c5"> </span><span id="r5c6">5</span><br/>
<span id="r6c1">l</span><span id="r6c2">i</span><span id="r6c3">n</span><span id="r6c4">e</span><span id="r6c5"> </span><span id="r6c6">6</span><br/>
<span id="r7c1">l</span><span id="r7c2">i</span><span id="r7c3">n</span><span id="r7c4">e</span><span id="r7c5"> </span><span id="r7c6">7</span><br/>
<span id="r8c1">l</span><span id="r8c2">i</span><span id="r8c3">n</span><span id="r8c4">e</span><span id="r8c5"> </span><span id="r8c6">8</span><br/>
<span id="r9c1">l</span><span id="r9c2">i</span><span id="r9c3">n</span><span id="r9c4">e</span><span id="r9c5"> </span><span id="r9c6">9</span><br/>
<span id="r10c1">l</span><span id="r10c2">i</span><span id="r10c3">n</span><span id="r10c4">e</span><span id="r10c5"> </span><span id="r10c6">10</span><br/>
<span id="r11c1">l</span><span id="r11c2">i</span><span id="r11c3">n</span><span id="r11c4">e</span><span id="r11c5"> </span><span id="r11c6">11</span><br/>
<span id="r12c1">l</span><span id="r12c2">i</span><span id="r12c3">n</span><span id="r12c4">e</span><span id="r12c5"> </span><span id="r12c6">12</span><br/>
<span id="r13c1">l</span><span id="r13c2">i</span><span id="r13c3">n</span><span id="r13c4">e</span><span id="r13c5"> </span><span id="r13c6">13</span><br/>
<span id="r14c1">l</span><span id="r14c2">i</span><span id="r14c3">n</span><span id="r14c4">e</span><span id="r14c5"> </span><span id="r14c6">14</span><br/>
<span id="r15c1">l</span><span id="r15c2">i</span><span id="r15c3">n</span><span id="r15c4">e</span><span id="r15c5"> </span><span id="r15c6">15</span><br/>
<span id="r16c1">l</span><span id="r16c2">i</span><span id="r16c3">n</span><span id="r16c4">e</span><span id="r16c5"> </span><span id="r16c6">16</span><br/>
<span id="r17c1">l</span><span id="r17c2">i</span><span id="r17c3">n</span><span id="r17c4">e</span><span id="r17c5"> </span><span id="r17c6">17</span><br/>
<span id="r18c1">l</span><span id="r18c2">i</span><span id="r18c3">n</span><span id="r18c4">e</span><span id="r18c5"> </span><span id="r18c6">18</span><br/>
<span id="r19c1">l</span><span id="r19c2">i</span><span id="r19c3">n</span><span id="r19c4">e</span><span id="r19c5"> </span><span id="r19c6">19</span><br/>
<span id="r20c1">l</span><span id="r20c2">i</span><span id="r20c3">n</span><span id="r20c4">e</span><span id="r20c5"> </span><span id="r20c6">20</span><br/>
</div>
<input type="text" placeholder="Enter in a span id like r10c1" id="rowColInput"></input>
<input type="submit" onclick="scroll()"/>
</body>
</html>
1 answers
solution1
2 ACCPTED 2016-10-25 15:29:25
You can use the jQuery animate method by adding the following line at the end of your scroll function:
$(scrollableContainer).animate({scrollTop: targetScrollTop}, 300);
Updated fiddle: https://jsfiddle.net/rykeemwv/4/
300 is the duration of the animation in milliseconds. The animation will use the jQuery default easing, but you can specify others. For more information check out the doc http://api.jquery.com/animate/ .
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.