스크롤 여기 사업부

Question

을 클릭에 div에하는 것은 바이올린에서 바이올린 링크 https://jsfiddle.net/hitech0101/5vhdm5hy/

$('.block').click(function() { 
    $('#mainContainer').animate({'width':'20%'}, 1000); 
    $(this).css({'background-color':'blue'}); 
    $('.block').css({'display':'block','width':'100%'}); 
    $('.second').css({'display':'inline-block'}) 
    }); 

에게, 나는 수직 블록으로 수평 블록을 변환하기 위해 jQuery를 사용하고 있습니다. 블록을 클릭하면 블록 색상이 빨간색에서 파란색으로 변경되었습니다. 특정 블록을 클릭하면 세로보기에서 블록의 위치로 이동하는 스크롤을 것입니다. 내가 jquery의 scrollTop() 메서드를 시도했지만 여전히 그것을 원하는 방식으로 작동시키지 못했습니다. 도와주세요.

바이올린은 내가 작업하고있는 웹 페이지의 부분적인 표현입니다. 원본 페이지에는 제외 된 콘텐츠가 더 있습니다. 주 컨테이너는 페이지의 두 번째 컨테이너입니다.

Answer 1

$(this).get(0).scrollIntoView(); 

이 줄을 .click 함수에 추가하십시오.

Fiddle

Answer 2

난 당신이 오프셋 최고 가치를 그 위치

$('.block').click(function() { 
    $('#mainContainer').animate({'width':'20%'}, 1000); 
    $(this).css({'background-color':'blue'}); 
    $('.block').css({'display':'block','width':'100%'}); 
    $('.second').css({'display':'inline-block'}); 
    /*below is what i was talking about*/ 
    var pos = $(this).offset(); 
    $('#mainContainer').animate({ scrollTop: pos.top }); 

}); 

Answer 3

$(document).on("click", ".block", function() { 
    var _body_html = $('html, body'); 
    var _scroll_to = $('.scroll-to'); 
    var _top = _scroll_to.offset().top; 
    _body_html.animate({ 
     scrollTop: _top 
    }, 1000); 
    setTimeout(function() { 
     _body_html.finish(); 
    }, 1000); 
}); 

Answer 4

없음 자바 스크립트를 필요로 #maincontainer 애니메이션을 제안한다. 앵커의 href에 요소를 지정할 수 있으며 자체를 포함하여 창 위쪽으로 스크롤합니다.

앵커에 div을 감싸거나 앵커 태그 자체 만 사용하면 두 래퍼가됩니다.

<a href="#scrollToMe"> 
    <div id="scrollToMe"></div> 
</a> 

그냥 항목이 스크롤이 바닥에 충돌 할 상위 요소의 맨 아래에있는 경우에만, 능력의 최선을보기에 요소를 스크롤 할 수 있음을 기억하고는 할 수 없습니다 더 멀리 가라.