2017-12-30 6 views
0

div를 지정된 ID 요소로 스크롤 할 수있는 jQuery 스크립트를 만들려고합니다.이 div는 다른 div에 있습니다. 나는 내가하는 모든 일이 스크립트가 div의 맨 아래로 스크롤되게 만들고, 어디에서 문제가 발생하는지 모르기 때문에 그 문제가있다.jQuery - 요소를 다른 요소로 스크롤

<html> 
<body> 
    <style> 
    .chat { 
     height: 100px; 
      overflow-y: scroll; 
    } 
    </style> 
    <div id="main_cointainer"> 
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam. 
    <br><br> 
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam. 
    <br><br> 
    <div class="chat"> 
     <p id="msg_70_3"> 
     something msg 0<br><br> 
     </p> 
     <p id="msg_71_3"> 
     something msg 1<br><br> 
     </p> 
     <p id="msg_72_3"> 
     something msg 2<br><br> 
     </p> 
     <p id="msg_73_3"> 
     <span style="color: red;">something msg 3 - HERE STOP SCROLL</span><br><br> 
     </p> 
     <p id="msg_74_3"> 
     something msg 4<br><br> 
     </p> 
     <p id="msg_75_3"> 
     something msg 5<br><br> 
     </p> 
     <p id="msg_76_3"> 
     something msg 6<br><br> 
     </p> 
     <p id="msg_77_3"> 
     something msg 7<br><br> 
     </p> 
     <p id="msg_78_3"> 
     something msg 8<br><br> 
     </p> 
    </div> 
    </div> 
</body> 
</html> 

그리고 내 jQuery를 스크립트 :

$('#main_cointainer .chat').delay(1000).animate({ 
    scrollTop: $('#msg_73_3').offset().top 
}, 'slow'); 

jsFiddle : 당신이 볼 수있는 https://jsfiddle.net/x7uxg7ga/

는, 스크롤이 .chat 사업부의 바닥에 가고 여기

내 HTML입니다 그리고 왜 ... 나는 p 요소의 ID를 설정했습니다 : msg_73_3 그래서이 요소에서 멈출 수 있지만 그렇지 않습니다. https://jsfiddle.net/kefnvqh1/

내가 설정 때문에 나는 그것을 할 : 여기

도 잘 결과를 제시 다른 파일입니다

scrollTop: 180 

하지만,이 스크립트는 자동이 높이를 계산해야한다.

감사합니다.

답변

0

대신 요소를 선택하는 대신 "본문"을 사용해보십시오.

$('html, body').delay(1000).animate({ 
    scrollTop: $('#msg_73_3').offset().top 
}, 'slow'); 

에서 확인하십시오 : https://jsfiddle.net/x7uxg7ga/1/

+0

나는 (그리고 body 태그 내부의) 주요 사업부를 스크롤 할 (내 모든 웹 사이트) 다른 사업부 안에 그러나 1 개 사업부,하지 않는, 그래서 당신의 대답이 나를 도와주지 않습니다. –

관련 문제