Question

我正在制作一个连续滚动的网页。但是我无法使其顺利滚动

我的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();
        });
    });
})();

我认为存在一个问题，因为我有另一个函数可以创建一个返回顶部的buttom，该函数如下：

 ((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);
        }); 

})();

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

任何人都知道为什么不工作？谢谢你！

Answer 1

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

无法实现两个平滑滚动效果

1 个答案: