0

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

1 回答 1

0

它没有成功，因为您尝试了我在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 可以在这里看到一个小提琴

已编辑

您的文档中有很多错误，这就是为什么不起作用。遇到麻烦时，请打开 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>
于 2013-07-08T20:02:45.183 回答