2013-01-15 10 views
2

저는 Ariel Flesler의 scrollTo 플러그인을 부트 스트랩과 함께 사용하고 있습니다. 정말 간단 해 보이지만 작동시키지는 못합니다. 버튼을 클릭하고 해당 ID로 부드럽게 스크롤합니다. 다음은 버튼 하나의 예입니다.jQuery scrollTo 플러그인

<a class="btn btn-primary" href="#faqs"></i>FAQS</a> 

<div class="id="faqs"> 



<script src="js/jquery.scrollTo-1.4.3.1-min.js"></script> 

QN :

다음은 HTML입니다. 1 내 모든 버튼이 작동하도록 jQuery가 있어야하는 항목은 무엇입니까?

Qn. 2 덧붙여 말하자면, 나는 트위터 부트 스트랩의 웹 사이트 "application.js"에서 그들이 의미하는 바를 모른 채 훔쳐 갔지만 내 웹 사이트를 만들기 위해 함께 해킹하기 만했습니다. 이 코드가 의미하는 바를 설명해 주시겠습니까?

//Is this bit of code the convention to add to the start of every jQuery doc? 
!function ($) { 
$(function(){ 
var $window = $(window) 

//What does this do? 
$('[href^=#]').click(function (e) { 
    e.preventDefault() 
}) 


//This code scrolls smoothly to top, however it only works when the code below is present. Why? 
$("a[href='#top']").click(function() { 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
    return false; 
}) 


// This is the weird bit of code I don't understand. Without this, my scrollTop doesn't work. Could this bit of code also interfere with scrollTo's plugin? I assume it will... 
$('.download-btn .btn').on('click', function() { 

    var css = $("#components.download input:checked") 
     .map(function() { return this.value }) 
     .toArray() 
    , js = $("#plugins.download input:checked") 
     .map(function() { return this.value }) 
     .toArray() 
    , vars = {} 
    , img = ['glyphicons-halflings.png', 'glyphicons-halflings-white.png'] 

내 질문에 모두 답변 해 주셔서 감사합니다.

//Is this bit of code the convention to add to the start of every jQuery doc? 
!function ($) { 
$(function(){ //<--------------this is where jQuery starts working 'document ready function' 
var $window = $(window) 

이 :

답변

2

이보기

//What does this do? 
$('[href^=#]').click(function (e) { 
    e.preventDefault(); 
}); 

.preventDefault()href="#"의 속성이 어떤 <a> 태그를 클릭하면 페이지 상단에 점프하지 않을 경우 있는지 확인하고있다 위의 스크립트 이는 return false;

과 같습니다. 아래 코드는

입니다.
//This code scrolls smoothly to top, however it only works 
//when the code below is present. Why? 
$("a[href='#top']").click(function() { 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
    return false; 
}); 

이 다음 html, body0의 문서 위치의 상단에 스크롤 클릭 된 때, 여기에 href='#top' 속성이있는 <a> 태그를 선택하기 때문에 예이 작동합니다. 그러나이 링크에서만 작동합니다. $("a[href='#top']")

전체 코드는 언급하지 않았지만 특정 div로 스크롤하려면 아무런 해가되지 않습니다. $("a[href='#top']").click(function() { 또는 $('[href^=#]').click(function (e) { 코드를 수정하여 모든 링크가 작동하도록 할 수 있습니다.

이 스크립트 적격 심사 수 있습니다 여기에 바이올린에

$('[href^=#]').click(function (e) { 
    e.preventDefault(); 
    var div = $(this).attr('href'); 
    $("html, body").animate({ 
     scrollTop: $(div).position().top 
     }, "slow"); 
}); 

체크 아웃 : 추가 플러그인없이 일 http://jsfiddle.net/Ja6DN/

+0

감사합니다. 마지막 질문은 일관성이 없다는 것을 깨달았습니다. jQuery의 구문과 관련된 문제 였기 때문에 코드 자체가 아닌 이해할 수 없었습니다. 답변에 많은 노력을 기울였습니다. –