Question

我正在网站上工作，遇到了一个问题。我对这一切都很陌生，所以我确定它只是一个简单的修复。基本上，我想使用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;
        });

Answer 1

由于你从This Question尝试了我的回答，但没有成功，但你有不同的设置。所以这将有效：

$("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 here

<强> EDITED

您的文档中存在相当多的错误，这就是为什么不起作用的原因。遇到麻烦时，请打开FF或Chrome开发工具（控制台......），这样就可以看出出了什么问题。代码“waypoint”中存在错误，无法加载。我现在评论它。以下工作就像一个魅力：

<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>

实时滚动问题（JS）

1 个答案: