scrollTop: container.offsetTop 没有移动到 jQuery 中的指定容器
scrollTop: container.offsetTop not moving to the specified container in jQuery
我想依次浏览句子列表。
这些句子是在 HTML div 容器中定义的 class parallelSentence。
首先我用 parallelSentences = $( '.parallelSentence' );
抓取列表中的所有句子
然后从该列表中选择一个句子，指定其在列表中的索引，textContainer = parallelSentences.find( '.source-sentence' ).get( 1 ); 用于位置 1.
的项目
最后移动到那个句子容器：
$('html, body').animate({
scrollTop: textContainer.offsetTop
}, "slow");
但是上面的代码移动到比预期容器更高的位置。
如何移动到句子容器？
在下面的代码片段中：如果我选择索引 0，它应该得到 Hello World 容器，索引 1: 你好容器，索引2：你好吗？，所以这些是每次移动的预期位置，但目前移动的位置高于它们指定的容器。
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>
offsetTop指的是"the number of pixels from the top of the closest relatively positioned parent element."
尝试使用 getBoundingClientRect().top，它获取相对于 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>
您可以使用getBoundingClientRect获取元素的位置，
注意：如果 window 已经滚动，此值随 window 变化，因此您可以使用 window.scrollY 始终滚动到位置 w.r.t 到 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>
我想依次浏览句子列表。
这些句子是在 HTML div 容器中定义的 class parallelSentence。
首先我用 parallelSentences = $( '.parallelSentence' );
然后从该列表中选择一个句子，指定其在列表中的索引，textContainer = parallelSentences.find( '.source-sentence' ).get( 1 ); 用于位置 1.
最后移动到那个句子容器：
$('html, body').animate({
scrollTop: textContainer.offsetTop
}, "slow");
但是上面的代码移动到比预期容器更高的位置。
如何移动到句子容器？
在下面的代码片段中：如果我选择索引 0，它应该得到 Hello World 容器，索引 1: 你好容器，索引2：你好吗？，所以这些是每次移动的预期位置，但目前移动的位置高于它们指定的容器。
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>
offsetTop指的是"the number of pixels from the top of the closest relatively positioned parent element."
尝试使用 getBoundingClientRect().top，它获取相对于 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>
您可以使用getBoundingClientRect获取元素的位置，
注意：如果 window 已经滚动，此值随 window 变化，因此您可以使用 window.scrollY 始终滚动到位置 w.r.t 到 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>