Javascript Truouble实现两种平滑滚动效果_Javascript_Scroll_Effects

Javascript Truouble实现两种平滑滚动效果

javascript scroll

Javascript Truouble实现两种平滑滚动效果,javascript,scroll,effects,Javascript,Scroll,Effects,我正在制作一个连续滚动的网页。但是我无法使它平滑滚动我的html代码是： <nav class="navbar"> <div class="navbar-inner"> <div class="container">  <a class="brand" href="index1.html">MAPPLAS</a> <ul class="

我正在制作一个连续滚动的网页。但是我无法使它平滑滚动

我的html代码是：

<nav class="navbar">
<div class="navbar-inner">
    <div class="container">
        <!-- Logo -->
        <a class="brand" href="index1.html">MAPPLAS</a>
        <ul class="nav">
        <li><a href="global.html" title="Home">Inicio</a></li>
        <li><a href="#portfoliosection" title="Portfolio">Portfolio</a></li>
        <li><a href="#teamsection" title="Equipo">Equipo</a></li>
        <li><a href="blog.html" title="Blog">Blog</a></li>
        <li><a href="#contactsection" title="Contacto">Contacto</a></li>
        </ul>
        </div><!-- end .container -->
        </div><!-- end .navbar-inner -->
    </nav> <!-- end .navbar -->

我认为这是一个问题，因为我有另一个函数，它创建了一个返回顶部的按钮，该函数如下：

((function() {
        $('ul.nav a').bind('click',function(event){
            var $anchor = $(this);

            $('html, body').stop().animate({
                scrollTop: $($anchor.attr('href')).offset().top
            }, 1500);
            event.preventDefault();
        });
    });
})();

 ((function() {

        $('<i id="back-to-top"></i>').appendTo($('body'));

        $(window).scroll(function() {

            if($(this).scrollTop() != 0) {
                $('#back-to-top').fadeIn(); 
            } else {
                $('#back-to-top').fadeOut();
            }

        });

        $('#back-to-top').click(function() {
            $('body,html').animate({scrollTop:0},600);
        }); 

})();

（（函数（）{
$（''）.appendTo（$（'body'）；
$（窗口）。滚动（函数（）{
如果（$（this）.scrollTop（）！=0）{
$（“#返回顶部”）.fadeIn（）；
}否则{
$（“#返回顶部”）.fadeOut（）；
}
});
$（“#返回顶部”）。单击（函数（）{
$（'body，html'）.animate（{scrollTop:0}，600）；
}); 
})();

问题是其中一个工作顺利（从后面到顶部），但另一个不行。我不是js方面的专家，我尝试过包含完全分离的js脚本，但没有解决问题

有人知道为什么不工作吗？谢谢！


<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Smooth Scrolling</title>
    <style type="text/css">
        .container{
            width:300px;
            margin:0 auto;  
                  }
        .section{
            margin-top:60px;
                }
    .navigation{
        position: fixed;
        background:white;
        padding:20px 20px;
        width:100%;
        margin-top:0px;
        top:0px;
    }
</style>
</head>
<body>
<div class="container">
<div class="navigation">
    <a href="#html">HTML</a>
    <a href="#javascript">JavaScript</a>
    <a href="#jquery">jQuery</a>
    <a href="#php">PHP</a>
    <a href="#css">CSS</a>
</div>
<div class="section">
    <h1 id="html">HTML</h1>
            <p>
            put your text about html here


            </p>
</div>
<div class="section">
    <h1 id="javascript">JavaScript</h1>
    <p>
            put your javascript details here.
            </p>
</div>
<div class="section">
    <h1 id="jquery">jQuery</h1>
    <p>
            Put your details about javascript here
            </p>

</div>
<div class="section">
    <h1 id="php">PHP</h1>
    <p>
            put your details about php here
            </p>

</div>
<div class="section">
    <h1 id="css">CSS</h1>
    <p>put your details </p>

</div>      
</div>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
 <script>
$(document).ready(function() {
    $('a[href^="#"]').click(function(event) {
        var id = $(this).attr("href");
        var offset = 60;
        var target = $(id).offset().top - offset;

        $('html, body').animate({scrollTop:target}, 3000);
        event.preventDefault();
    });
});
</script>
</body>
</html>

平滑滚动
.集装箱{
宽度：300px；
保证金：0自动；
}
.科{
边缘顶部：60像素；
}
.导航{
位置：固定；
背景：白色；
填充：20px 20px；
宽度：100%；
边际上限：0px；
顶部：0px；
}
HTML

把你关于html的文字放在这里

JavaScript

将您的javascript详细信息放在这里。

jQuery

在这里输入有关javascript的详细信息

PHP

在这里输入有关php的详细信息

CSS
把你的细节写下来
$（文档）.ready（函数（）{
$（'a[href^=“#“]”）。单击（函数（事件）{
var id=$（this.attr（“href”）；
var偏移=60；
var target=$（id）.offset（）.top-offset；
$（'html，body'）.animate（{scrollTop:target}，3000）；
event.preventDefault（）；
});
});