Question

我正在尝试开发一个网站，如果用户按下键盘上的n或N键，该页面将自动滚动到下一部分。同样适用于上一节。但是我遇到了一个问题，要滚动下一部分，有时我必须按n两次。相反，当我按p键返回上一部分时，它正在跳过两个部分而不是一部分。我怎么解决这个问题？我在这里包括我的代码：

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
         pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript">
        function ScrollTo(address) {
            $('html, body').animate({
                scrollTop : ($('#' + address).offset().top)
            }, 700);
        }

    </script>

</head>

<body>


<section id="section1">
    <h1>section1</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section2">
    <h1>section2</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section3">
    <h1>section3</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section4">
    <h1>section4</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section5">
    <h1>section5</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section6">
    <h1>section6</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section7">
    <h1>section7</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section8">
    <h1>section8</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section9">
    <h1>section9</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>


<section id="section10">
    <h1>section10</h1>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</section>



<script type="text/javascript">

    var sections = [];
    $(document).find("section").each(function() {
        sections.push(this.id);
    });

    var sectionIndex = 0;

    $(document).keyup(
        function(evt) {
            var elid = $(document.activeElement).is("input, textarea");
            if (elid) {
                return;
            }

            if ((evt.keyCode == 80 | evt.keyCode == 112)
                & sectionIndex > 0) {
                sectionIndex=sectionIndex-1;
                ScrollTo(sections[sectionIndex]);
            } else if ((evt.keyCode == 78 | evt.keyCode == 110)
                & sectionIndex < sections.length - 1) {
                sectionIndex=sectionIndex+1;
                ScrollTo(sections[sectionIndex]);
            }
        });


    $(document).scroll(
        function() {
            $('section').each(
                function() {
                    if ($(this).position().top <= $(document).scrollTop() && ($(this).position().top + $(this).outerHeight()) > $(document).scrollTop()) {
                        sectionIndex = sections.indexOf(($(this).attr('id')));
                    }
                });
        });
</script>

</body>
</html>

Answer 1

提示：稍微更改一下代码......

$('section').each(
  function () {
    this.style.background = '';
    if ($(this).position().top <= $(document).scrollTop() && ($(this).position().top + $(this).outerHeight()) > $(document).scrollTop()) {
      this.style.background = 'lightseagreen';
      sectionIndex = sections.indexOf(($(this).attr('id')));
    }
  });

现在在滚动期间，您将看到哪个部分是“当前”。这表明了问题：按下“N”后，前一部分仍然是“当前”。

您可以轻松修复它：

目前突出显示的部分是与屏幕上限相交的部分，
相反，您可以想象一条线位于屏幕顶部以下，比较低50px，并将其视为确定哪个部分是最新的“焦点”。

代码可能如下所示：

    $('section').each(
      function () {
        const focus = $(document).scrollTop() + 50;
        this.style.background = '';
        if ($(this).position().top <= focus && ($(this).position().top + $(this).outerHeight()) > focus) {
          this.style.background = 'lightseagreen';
          sectionIndex = sections.indexOf(($(this).attr('id')));
        }
      });

此处仅更改是与$(document).scrollTop() + 50而不是$(document).scrollTop()进行比较。请注意，现在该部分在触及屏幕的上边缘之前会更快地突出显示。

jQuery滚动到下一部分不能正常工作

1 个答案: