实时滚动问题(JS）

Live Scroll Issues (JS)

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

我现在正在一个网站上工作，遇到了一个问题。我对这一切都很陌生，所以我确信这只是一个简单的解决方案。基本上，我想使用javascript来创建一个onlick事件，在该事件中，单击标题中的链接将导致实时动画向下滚动到页面上的某个点。问题是什么？没有实时滚动，它只是跳跃。这是一段代码。谢谢

<head style="overflow-x: hidden">
    <title>Dupont Studios</title>
    <link href= 'style.css' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript" src="waypoints.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.js"></script>
    <script>

        $(function() {
        // Do our DOM lookups beforehand
        var nav_container = $(".nav-container");
        var nav = $("nav");
        nav_container.waypoint({
        handler: function(direction) {
        nav_container.toggleClass('sticky', direction=='down');
        }
        });
        });
    </script>
    <script>
        $(".nav-item").on("click", function( e ) {
        e.preventDefault();
        $("body, html").animate({
        scrollTop: $( $(this).attr('href') ).offset().top
        }, 600);
        });
    </script>
</head>
<div id = 'nav-items-container'>
            <ul class = 'nav-items'>
                <li class = 'nav-item'><a href='#what'>what</a></li>
                <li class = 'nav-item'><a href='#how'>how</a></li>
                <li class = 'nav-item'><a href='#why'>why</a></li>
                <li class = 'nav-item'><a href='#where'>where</a></li>
                <li class = 'nav-item'><a href='#who'>who</a></li>
            </ul>
        </div>

跳转点示例：

 <div class = 'mark' id = 'how'></div>

js的另一次尝试，它不起的作用

 $("a.nav-item").click(function() {
        $("html, body").animate({
        scrollTop: $($(this).attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
        });
        return false;
        });

它没有成功，因为你尝试了我在这个问题中的答案，但你有一个不同的设置。因此，这将起作用：

$("li.nav-item").click(function() {
        $("html, body").animate({
            scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
        });
        return false;
    });

重点是您要查找的元素#tag位于LI元素内的A元素内。Ypu可以在此处看到Fiddle

已编辑

你的文档中有不少错误，这就是为什么不起作用。当出现问题时，打开FF或Chrome开发工具（控制台…），这样你就可以看到问题所在。代码"路点"中有一个错误，无法加载。我暂时对此进行了评论。以下作品很有魅力：

<html>
<head style="overflow-x: hidden">
    <title>Dupont Studios</title>
    <link href= 'style.css' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script>

        $(document).ready(function(){
            /*Do our DOM lookups beforehand
            var nav_container = $(".nav-container");
            var nav = $("nav");
            nav_container.waypoint({
                handler: function(direction) {
                    nav_container.toggleClass('sticky', direction=='down');
                }
            });*/

            $("li.nav-item").click(function() {
                alert("ok");
                $("html, body").animate({
                    scrollTop: $($(this).children().attr("href")).offset().top + "px"}, {duration: 500, easing: "swing"
                });
                return false;
            });
        });
    </script>
    <style type="text/css">
        .long_div{
            background-color: lightblue;
            min-height: 600px; 
            border: thin solid blue;
        }
    </style>
</head>
<body>
<div id = 'nav-items-container'>
            <ul class = 'nav-items'>
                <li class = 'nav-item'><a href='#what'>what</a></li>
                <li class = 'nav-item'><a href='#how'>how</a></li>
                <li class = 'nav-item'><a href='#why'>why</a></li>
                <li class = 'nav-item'><a href='#where'>where</a></li>
                <li class = 'nav-item'><a href='#who'>who</a></li>
            </ul>
        </div>

        <div id="what" class="long_div">
            What
        </div>
        <div id="how" class="long_div">
            How
        </div>
        <div id="why" class="long_div">
            Why
        </div>
    </body>
    </html>
相关文章：