页面向上跳转而不是向上滚动

Page jumps up instead of scrolling up

本文关键字：滚动      更新时间：2023-09-26

我从另一个堆栈溢出问题中得到了这个代码位，但似乎有一个小问题。当我从一个部分移动到另一个部分时，散列会正确地改变，但当我试图向上滚动时，它会跳到最顶部，而不是平滑的手动滚动。如有任何帮助，我们将不胜感激：）

HTML

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<header>
</header>
<body>
    <div class="main">
        <section id="one" class="section"></section>
        <section id="two" class="section"></section>
        <section id="three" class="section"></section>
        <section id="four" class="section"></section>
        <section id="five" class="section"></section>
        <section id="six" class="section"></section>
    </div>
</body>
</html>

这是JS:

$(document).scroll(function(){
    $('section').each(function(){
        if (
           $(this).offset().top < window.pageYOffset
    //begins before top
        && $(this).offset().top + $(this).height() > window.pageYOffset
    //but ends in visible area
    //+ 10 allows you to change hash before it hits the top border
        ) {
            window.location.hash = $(this).attr('id');
        }
    });
});

您可以执行pageYOffset，而不是$(window).scrollTop()，它将返回页面顶部与窗口中文档顶部的偏移距离。如果你想动画滚动到属性，你会想滚动到带有id的元素的位置。如果你想动态滚动到页面顶部，你可以做

$(window).animate({
  top: 0
}, 1000);

您可以通过在javascript中添加向上滚动动画来克服这个问题，通过这种方式，我们为滚动添加了延迟，从而提供完美的向上滚动效果。

Javascript

window.onload = function() {
// short timeout
setTimeout(function() {
    $(document.body).scrollTop(0);
    }, 15);
};
相关文章：