marcanuy
Reputation: 23962
scrollTop: container.offsetTop not moving to the specified container in jQuery
I want to move through a list of sentences sequentally.
These sentences are defined in HTML div containers with the class parallelSentence.
First I grab all the sentences in a list with parallelSentences = $( '.parallelSentence' );
Then choose a sentence from that list specifying its index on the list, with textContainer = parallelSentences.find( '.source-sentence' ).get( 1 ); for item at position 1.
Finally move to that sentence container:
$('html, body').animate({
scrollTop: textContainer.offsetTop
}, "slow");
But the above code moves to a higher position than the expected container.
How to move to the sentence container?
In the following code snippet: if I choose the index 0, It should get the Hello World container, index 1: Hello container, index 2: How are you?, so these are the expected locations to move each time but it is currently moving higher than their specified containers.
parallelSentences = $( '.parallelSentence' );
textContainer = parallelSentences.find( '.source-sentence' ).get( 1 );
$('html, body').animate({
scrollTop: textContainer.offsetTop - 150
}, "slow");<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="content">
<div class="container-fluid py-5">
<header class="text-center mb-5">
<h1 id="equilang-item-header" lang="en">Hello World <span lang="es">- Hola Mundo</span></h1>
<h2> <small class="text-muted">Hello World</small></h2>
<div class="text-center">
<p>Blah blah blah</p>
</div>
<div class="row border-top text-muted pt-4">
<div class="col-6 border-right">
<p>
<a href="/plaintext/14-hello-world/">Main text</a> by <em><a href="/authors/john-doe-1/">John Doe</a></em> in <strong>English</strong>.
</p>
</div>
<div class="col-6" id="translation-title-meta">
<p>
<a href="/plaintext/15-hola-mundo/">Translation</a> by <em><a href="/authors/richard-roe-2/">Richard Roe</a></em> in <strong>Spanish</strong>.
</p>
</div>
</div>
<div class="text-center">
<p></p>
</div>
</header>
<div class="row justify-content-center">
<div class="col-10 col-11-md">
<div class="row border-top pt-3 mb-5 bg-light">
<div class="col-sm-2">
<i class="fas fa-music fa-5x"></i>
</div>
<div class="col-sm-5">
<p class="text-muted text-center">
English
<button id="btn-play-source" class="btn btn-primary"><i class="fas fa-play-circle"></i> EN</button>
</p>
<p class="text-muted text-center">
English - Spanish
<button id="btn-play-source-target" class="btn btn-primary"><i class="fas fa-play-circle"></i> EN-ES</button>
</p>
</div>
<div class="col-sm-5">
<p class="text-muted text-center">
Spanish
<button id="btn-play-translation" class="btn btn-primary"><i class="fas fa-play-circle"></i> ES</button>
<p class="text-muted text-center">
Spanish - English
<button id="btn-play-target-source" class="btn btn-primary"><i class="fas fa-play-circle"></i> ES-EN</button>
</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-11 col-10-md">
<h3 class="p-3 mb-2 bg-info text-white">Title</h3>
<div id="equilang-parallel-title-block">
<div id="parallelSentence-55-60" class="row py-5 parallelSentence">
<div id="src-55" class="col-8 source-sentence" style="font-size: 2em">
<ruby>Hello World</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Hola Mundo
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines55mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
</div>
<hr>
<h3 class="p-3 mb-2 bg-info text-white">Content</h3>
<div id="parallelSentence-56-61" class="row py-5 parallelSentence">
<div id="src-56" class="col-8 source-sentence" style="font-size: 2em">
<ruby>Hello</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Hola
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines56mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-57-62" class="row py-5 parallelSentence">
<div id="src-57" class="col-8 source-sentence" style="font-size: 2em">
<ruby>How are you?</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Como estas?
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines57mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-58-64" class="row py-5 parallelSentence">
<div id="src-58" class="col-8 source-sentence" style="font-size: 2em">
<ruby>I'm good</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
gracias
<audio class="translation-sentence-audio" src="/media/lines/64.mp3"></audio>
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines58mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-59-63" class="row py-5 parallelSentence">
<div id="src-59" class="col-8 source-sentence" style="font-size: 2em">
<ruby>thanks</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Yo bien y vos?
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines59mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="playlist-status"></div>
<div id="audio-player" class="d-flex justify-content-center fixed-bottom invisible">
<div class="bg-dark text-white p-2">
<button id="audio-player-pause" class="btn btn-primary" type="button"><i class="fas fa-pause"></i></button>
</div>
</div>
</div>
</div>
</div> <!-- container -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>Upvotes: 2
Views: 576
Answers (2)
Code Maniac
Reputation: 37755
You can use getBoundingClientRect to get position of element,
Note: This values varies with the window if it is already scrolled, so you can use window.scrollY with it to always scroll to position w.r.t to window
parallelSentences = $('.parallelSentence');
textContainer = parallelSentences.find('.source-sentence').get(0);
$('html, body').animate({
scrollTop: textContainer.getBoundingClientRect().top + window.scrollY
}, "slow");<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="content">
<div class="container-fluid py-5">
<header class="text-center mb-5">
<h1 id="equilang-item-header" lang="en">Hello World <span lang="es">- Hola Mundo</span></h1>
<h2> <small class="text-muted">Hello World</small></h2>
<div class="text-center">
<p>Blah blah blah</p>
</div>
<div class="row border-top text-muted pt-4">
<div class="col-6 border-right">
<p>
<a href="/plaintext/14-hello-world/">Main text</a> by <em><a href="/authors/john-doe-1/">John Doe</a></em> in <strong>English</strong>.
</p>
</div>
<div class="col-6" id="translation-title-meta">
<p>
<a href="/plaintext/15-hola-mundo/">Translation</a> by <em><a href="/authors/richard-roe-2/">Richard Roe</a></em> in <strong>Spanish</strong>.
</p>
</div>
</div>
<div class="text-center">
<p></p>
</div>
</header>
<div class="row justify-content-center">
<div class="col-10 col-11-md">
<div class="row border-top pt-3 mb-5 bg-light">
<div class="col-sm-2">
<i class="fas fa-music fa-5x"></i>
</div>
<div class="col-sm-5">
<p class="text-muted text-center">
English
<button id="btn-play-source" class="btn btn-primary"><i class="fas fa-play-circle"></i> EN</button>
</p>
<p class="text-muted text-center">
English - Spanish
<button id="btn-play-source-target" class="btn btn-primary"><i class="fas fa-play-circle"></i> EN-ES</button>
</p>
</div>
<div class="col-sm-5">
<p class="text-muted text-center">
Spanish
<button id="btn-play-translation" class="btn btn-primary"><i class="fas fa-play-circle"></i> ES</button>
<p class="text-muted text-center">
Spanish - English
<button id="btn-play-target-source" class="btn btn-primary"><i class="fas fa-play-circle"></i> ES-EN</button>
</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-11 col-10-md">
<h3 class="p-3 mb-2 bg-info text-white">Title</h3>
<div id="equilang-parallel-title-block">
<div id="parallelSentence-55-60" class="row py-5 parallelSentence">
<div id="src-55" class="col-8 source-sentence" style="font-size: 2em">
<ruby>Hello World</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Hola Mundo
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines55mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
</div>
<hr>
<h3 class="p-3 mb-2 bg-info text-white">Content</h3>
<div id="parallelSentence-56-61" class="row py-5 parallelSentence">
<div id="src-56" class="col-8 source-sentence" style="font-size: 2em">
<ruby>Hello</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Hola
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines56mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-57-62" class="row py-5 parallelSentence">
<div id="src-57" class="col-8 source-sentence" style="font-size: 2em">
<ruby>How are you?</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Como estas?
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines57mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-58-64" class="row py-5 parallelSentence">
<div id="src-58" class="col-8 source-sentence" style="font-size: 2em">
<ruby>I'm good</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
gracias
<audio class="translation-sentence-audio" src="/media/lines/64.mp3"></audio>
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines58mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-59-63" class="row py-5 parallelSentence">
<div id="src-59" class="col-8 source-sentence" style="font-size: 2em">
<ruby>thanks</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Yo bien y vos?
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines59mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="playlist-status"></div>
<div id="audio-player" class="d-flex justify-content-center fixed-bottom invisible">
<div class="bg-dark text-white p-2">
<button id="audio-player-pause" class="btn btn-primary" type="button"><i class="fas fa-pause"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- container -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>Upvotes: 2
Tyler Roper
Reputation: 21672
offsetTop refers to "the number of pixels from the top of the closest relatively positioned parent element."
Try using getBoundingClientRect().top instead, which fetches the offset relative to the window.
scrollTop: textContainer.getBoundingClientRect().top
parallelSentences = $( '.parallelSentence' );
textContainer = parallelSentences.find( '.source-sentence' ).get( 1 );
$('html, body').animate({
scrollTop: textContainer.getBoundingClientRect().top
}, "slow");<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<meta charset="utf-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="content">
<div class="container-fluid py-5">
<header class="text-center mb-5">
<h1 id="equilang-item-header" lang="en">Hello World <span lang="es">- Hola Mundo</span></h1>
<h2> <small class="text-muted">Hello World</small></h2>
<div class="text-center">
<p>Blah blah blah</p>
</div>
<div class="row border-top text-muted pt-4">
<div class="col-6 border-right">
<p>
<a href="/plaintext/14-hello-world/">Main text</a> by <em><a href="/authors/john-doe-1/">John Doe</a></em> in <strong>English</strong>.
</p>
</div>
<div class="col-6" id="translation-title-meta">
<p>
<a href="/plaintext/15-hola-mundo/">Translation</a> by <em><a href="/authors/richard-roe-2/">Richard Roe</a></em> in <strong>Spanish</strong>.
</p>
</div>
</div>
<div class="text-center">
<p></p>
</div>
</header>
<div class="row justify-content-center">
<div class="col-10 col-11-md">
<div class="row border-top pt-3 mb-5 bg-light">
<div class="col-sm-2">
<i class="fas fa-music fa-5x"></i>
</div>
<div class="col-sm-5">
<p class="text-muted text-center">
English
<button id="btn-play-source" class="btn btn-primary"><i class="fas fa-play-circle"></i> EN</button>
</p>
<p class="text-muted text-center">
English - Spanish
<button id="btn-play-source-target" class="btn btn-primary"><i class="fas fa-play-circle"></i> EN-ES</button>
</p>
</div>
<div class="col-sm-5">
<p class="text-muted text-center">
Spanish
<button id="btn-play-translation" class="btn btn-primary"><i class="fas fa-play-circle"></i> ES</button>
<p class="text-muted text-center">
Spanish - English
<button id="btn-play-target-source" class="btn btn-primary"><i class="fas fa-play-circle"></i> ES-EN</button>
</p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-11 col-10-md">
<h3 class="p-3 mb-2 bg-info text-white">Title</h3>
<div id="equilang-parallel-title-block">
<div id="parallelSentence-55-60" class="row py-5 parallelSentence">
<div id="src-55" class="col-8 source-sentence" style="font-size: 2em">
<ruby>Hello World</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Hola Mundo
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines55mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
</div>
<hr>
<h3 class="p-3 mb-2 bg-info text-white">Content</h3>
<div id="parallelSentence-56-61" class="row py-5 parallelSentence">
<div id="src-56" class="col-8 source-sentence" style="font-size: 2em">
<ruby>Hello</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Hola
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines56mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-57-62" class="row py-5 parallelSentence">
<div id="src-57" class="col-8 source-sentence" style="font-size: 2em">
<ruby>How are you?</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Como estas?
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines57mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-58-64" class="row py-5 parallelSentence">
<div id="src-58" class="col-8 source-sentence" style="font-size: 2em">
<ruby>I'm good</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
gracias
<audio class="translation-sentence-audio" src="/media/lines/64.mp3"></audio>
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines58mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="parallelSentence-59-63" class="row py-5 parallelSentence">
<div id="src-59" class="col-8 source-sentence" style="font-size: 2em">
<ruby>thanks</ruby>
<p>
</p>
</div>
<div class="col-4 translation-sentence border-left">
<div class="p-2 mb-1 text-muted">
Yo bien y vos?
</div>
<p class="border-top pt-3">
<button class="translation-audio" data-target="stclines59mp3">
<i class="fas fa-play-circle"></i>
</button>
</p>
</div>
</div>
<div id="playlist-status"></div>
<div id="audio-player" class="d-flex justify-content-center fixed-bottom invisible">
<div class="bg-dark text-white p-2">
<button id="audio-player-pause" class="btn btn-primary" type="button"><i class="fas fa-pause"></i></button>
</div>
</div>
</div>
</div>
</div> <!-- container -->
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>Upvotes: 1
Related Questions
- jQuery .scrollTop not scrolling properly
- Scrolltop offset top issue
- scrollTop doesn't seem to be correct
- Jquery scrollTop goes to the wrong position
- Scrolltop not going to the correct position
- Jquery scrolltop won't work with offset
- scrollTop offset() not animating/working correctly with divs inside of container
- ScrollTop - jQuery does not scroll
- jquery scrollTop offset issue
- scrollTop not scrolling to position