雙重實現兩個平滑滾動效果

我正在製作一個連續滾動的網頁。但是我不能讓它滾動順暢雙重實現兩個平滑滾動效果

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

})();

事情是o ne工作順利（回到頂部），但另一個不是。我不是js的專家，我嘗試過使用完全分離的js腳本，但沒有解決問題。

任何人都有一個想法，爲什麼不工作??謝謝你！

來源

2013-04-27 nuri

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

來源

2013-04-27 15:21:44

它的工作原理！謝謝你！ – nuri 2013-04-27 15:48:48

雙重實現兩個平滑滾動效果

回答

相關問題