Javascript 实时滚动问题（JS）_Javascript_Jquery_Html_Css

Javascript 实时滚动问题（JS）

javascript jquery html css

Javascript 实时滚动问题（JS）,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我现在正在一个网站上工作，遇到了一个问题。我对这一切都很陌生，所以我相信这只是一个简单的解决办法。基本上，我希望使用javascript来创建一个onlick事件，在该事件中，单击标题中的链接将导致一个实时动画滚动到页面上的某个点。问题是什么？没有实时滚动，它只是跳跃。下面是一段代码。谢谢 <head style="overflow-x: hidden"> <title>Dupont Studios</title> <link href=

我现在正在一个网站上工作，遇到了一个问题。我对这一切都很陌生，所以我相信这只是一个简单的解决办法。基本上，我希望使用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>

没有成功，因为您尝试了我的答案，但设置不同。因此，这将起作用：

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


杜邦工作室
$（文档）.ready（函数（）{
/*事先进行DOM查找
var nav_container=$（“.nav container”）；
var资产净值=$（“资产净值”）；
导航集装箱航路点({
处理程序：函数（方向）{
nav_container.toggleClass（'sticky'，direction=='down'）；
}
});*/
$（“li.nav项”）。单击（函数（）{
警报（“正常”）；
$（“html，body”）.animate({
scrollTop:$（$（this.children（）.attr（“href”））.offset（）.top+“px”}，{持续时间：500，缓和：“swing”
});
返回false；
});
});
龙鼓分区{
背景颜色：浅蓝色；
最小高度：600px；
边框：淡蓝色；
}







什么
怎么
为什么？

今天有人问了同样的问题，看看这是否对你有帮助：我尝试了一下，但它不起作用。我用我拥有的东西替换了上面的代码，但它仍然不起作用。这把小提琴拉得很好，但我很困惑。有什么想法吗？谢谢你的帮助

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

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