2017-05-10 1 views
0

세로 스크롤 막대가있는 드롭 다운이 있습니다. 내가 필요한 것은 드롭 다운에서 텍스트를 선택하면 스크롤 상단의 상단에 있어야합니다. 전의. 드롭 다운에 10 개의 항목이 있습니다. 세 번째 항목을 선택하면 선택한 항목이 스크롤 막대 상단에 표시됩니다. 다음 코드를 사용해보십시오.스크롤 막대 위쪽으로 선택한 값을 밀어 넣는 방법

$(document).ready(function(){ 
    $("p").on("click", function(){ 
     var scroll = $(document).scrollTop(); 
     alert(scroll); 
    }); 
}); 

그냥 시도해 보았습니다. 어떻게해야할지 모릅니다. 나를

+0

도움이 필요하시면 예제 또는 HTML을 제공해 주시겠습니까? –

+0

html 코드도 제공 할 수 있습니까? –

+0

질문을 편집하여 요청한 정보를 추가하십시오. –

답변

0

prependTo 도움 스크롤

$(document).ready(function(){ 
 

 
    $("p").on("click", function(){ 
 
     $('html, body').animate({ 
 
     scrollTop: $(this).offset().top 
 
     },100); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="nano has-scrollbar"> 
 
     <p>jerrin</p> 
 
     <p>stephen</p> 
 
     <p>augustin</p> 
 
     <p>yeswanth</p> 
 
     <p>irfan</p> 
 
     <p>aashik</p> 
 
     <p>dinesh</p> 
 
     <p>zaid</p> 
 
     <p>mari</p> 
 
     <p>aravinth</p> 
 
     <p>asf</p> 
 
     <p>qwe</p> 
 
     <p>ewq</p> 
 
     <p>fhg</p> 
 
     <p>uyt</p> 
 
     <p>rty</p> 
 
     <p>rty</p> 
 
     <p>rty</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
    </html>

$(document).ready(function(){ 
 
    $("p").on("click", function(){ 
 
     $(this).prependTo(".nano") 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<head> 
 

 
    <body> 
 
    <div class="container"> 
 
     <div class="nano has-scrollbar"> 
 
     <p>jerrin</p> 
 
     <p>stephen</p> 
 
     <p>augustin</p> 
 
     <p>yeswanth</p> 
 
     <p>irfan</p> 
 
     <p>aashik</p> 
 
     <p>dinesh</p> 
 
     <p>zaid</p> 
 
     <p>mari</p> 
 
     <p>aravinth</p> 
 
     <p>asf</p> 
 
     <p>qwe</p> 
 
     <p>ewq</p> 
 
     <p>fhg</p> 
 
     <p>uyt</p> 
 
     <p>rty</p> 
 
     <p>rty</p> 
 
     <p>rty</p> 
 
     </div> 
 
    </div> 
 
    </body> 
 

 
    </html>

+0

감사합니다. –

관련 문제