我想依次浏览句子列表。
这些句子在HTML div容器中定义为类parallelSentence。
首先，我使用parallelSentences = $( '.parallelSentence' );
然后从该列表中选择一个句子，以指定其在列表中的索引，其中textContainer = parallelSentences.find( '.source-sentence' ).get( 1 );用于位置 1 的项目。
最后移至该句子容器：
$('html, body').animate({
scrollTop: textContainer.offsetTop
}, "slow");
但是上面的代码移到了比预期容器更高的位置。
如何移至句子容器？
在以下代码段中：如果我选择索引0，它将获得 Hello World 容器，索引为1： Hello 容器，索引为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>
答案 0 :(得分：2)
您可以使用getBoundingClientRect获取元素的位置，
注意：如果窗口已经滚动，则该值随窗口而变化，因此您可以将window.scrollY与窗口一起使用，以始终滚动到窗口的位置
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>
答案 1 :(得分：1)
offsetTop指的是“距离相对最靠近的父元素顶部的像素数。”
尝试使用getBoundingClientRect().top代替，它获取相对于窗口的偏移量。
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>