두 개의 부드러운 스크롤 효과를 구현하는 방법

나는 연속 스크롤 인 웹 페이지를 만들고 있습니다. 내가 할 수없는 오전 그러나 스크롤 원활두 개의 부드러운 스크롤 효과를 구현하는 방법

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

})();

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

두 개의 부드러운 스크롤 효과를 구현하는 방법

답변

관련 문제