[jquery] jquery를 사용하여 div로 스크롤

Program / 글쓴이

측면에 고정 링크 표시 줄이있는 페이지가 있습니다. 다른 div로 스크롤하고 싶습니다. 기본적으로 페이지는 하나의 긴 웹 사이트이며 메뉴 상자를 사용하여 다른 div로 스크롤하고 싶습니다.

여기까지 내가 가진 jquery가 있습니다.

$(document).ready(function() {
    $('#contactlink').click = function() {
        $(document).scrollTo('#contact');
    }
});

문제는로드 될 때 자동으로 연락처 div로 이동 한 다음 #contactlink메뉴에서를 누르면 맨 위로 스크롤됩니다.

편집 : HTML 

<!DOCTYPE html>

<html lang="en">

    <head>
    <meta charset="utf-8">

    <!-- jQuery-->
    <script src = "<?php echo base_url() ?>assets/js/jquery.js"></script>

    <!-- .js file-->
    <script src = "<?php echo base_url() ?>assets/js/pagetwo.js"></script>

    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/reset.css" />

    <!-- .css for page -->
    <link rel="stylesheet" type="text/css" href="<?php echo base_url()?>assets/css/pagetwo.css"/>

    <!-- page title-->
    <title><!-- Insert Title --></title>


</head>
<body>
    <div id="container">

        <div id="sidebar">
            <ul>
                <li><a id = "aboutlink" href="#">auck</a></li>
                <li><a id = "peojectslink" href="#">Projects</a></li>
                <li><a id = "resumelink" href="#">Resume</a></li>
                <li><a id = "contactlink" href="#">Contact</a></li>
            </ul>
        </div>

        <div id="content">
            <div class="" id="about">
                <p class="header">uck</p>
                <p class="info">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <div class="sections"id="projects">
                <p class = "header">Projects</p>
                <p class="info">Projects</p>
            </div>
            <div class="sections" id="resume">
                <p class = "header">Resume</p>
                <p class="info">Resume</p>
            </div>
            <div class="sections" id="contacts">
                <p class = "header">Contact</p>
                <p class="info">Contact</p>
            </div>
        </div>
    </div>
</body>

도와 주셔서 감사합니다

답변

먼저 코드에 contactdiv 가 포함되어 있지 않으며 contactsdiv가 있습니다!

사이드 바 contact에서 페이지 하단의 div에 있습니다 contacts. s코드 샘플 의 최종 버전 을 제거했습니다 . (또한 projectslink사이드 바 에서 ID 철자를 잘못 입력했습니다 ).

둘째, jQuery 참조 페이지 에서 클릭 에 대한 몇 가지 예제를 살펴보십시오 . object.click( function() { // Your code here } );click 이벤트 핸들러를 객체에 바인딩 하려면 click like를 사용해야 합니다. 아래 예제와 같이. 옆으로 인수없이 객체를 사용하여 클릭을 트리거 할 수도 있습니다 object.click().

셋째, jQuery scrollTo의 플러그인 입니다. 플러그인이 설치되어 있는지 모르겠습니다. scrollTo()플러그인 없이는 사용할 수 없습니다 . 이 경우 원하는 기능은 2 줄의 코드이므로 플러그인을 사용할 이유가 없습니다.

좋아, 이제 해결책으로 넘어갑니다.

사이드 바에서 링크를 클릭하면 아래 코드가 올바른 div로 스크롤됩니다. 창은 스크롤 할 수있을만큼 커야합니다.

// This is a functions that scrolls to #{blah}link
function goToByScroll(id) {
    // Remove "link" from the ID
    id = id.replace("link", "");
    // Scroll
    $('html,body').animate({
        scrollTop: $("#" + id).offset().top
    }, 'slow');
}

$("#sidebar > ul > li > a").click(function(e) {
    // Prevent a page reload when a link is pressed
    e.preventDefault();
    // Call the scroll function
    goToByScroll(this.id);
});

라이브 예

( 여기서 가져온 기능으로 스크롤 )

추신 : 분명히 앵커 태그를 사용하는 대신이 경로를 사용해야 할 강력한 이유가 있어야합니다 <a href="#gohere">blah</a>…<a name="gohere">blah title</a>

답변

.scrollTo()jQuery 에는 메소드 가 없지만 메소드 가 있습니다 .scrollTop(). .scrollTop매개 변수, 즉 스크롤 막대를 스크롤해야하는 픽셀 값이 필요합니다.

예:

$(window).scrollTop(200);

내용이 충분하면 창을 스크롤합니다.

따라서 .offset()또는로 원하는 값을 얻을 수 있습니다 .position().

예:

$(window).scrollTop($('#contact').offset().top);

#contact요소를보기로 스크롤해야합니다 .

비 jQuery 대체 방법은 .scrollIntoView()입니다. 다음 DOM element과 같은 방법으로 해당 메소드를 호출 할 수 있습니다 .

$('#contact')[0].scrollIntoView(true);

true요소가 맨 위에 위치하고 false뷰의 맨 아래에 배치됨을 나타냅니다 . jQuery 메소드의 좋은 점은 fx functionslike 와 함께 사용할 수도 있다는 것 .animate()입니다. 그래서 당신은 무언가를 부드럽게 스크롤 할 수 있습니다.

참조 : .scrollTop () , .position () , .offset ()

답변

당신은 시도 할 수 있습니다 : 

$("#MediaPlayer").ready(function(){
    $("html, body").delay(2000).animate({
        scrollTop: $('#MediaPlayer').offset().top
    }, 2000);
});

답변

이 작은 기능을 추가하고 다음과 같이 사용하십시오. $('div').scrollTo(500);

jQuery.fn.extend(
{
  scrollTo : function(speed, easing)
  {
    return this.each(function()
    {
      var targetOffset = $(this).offset().top;
      $('html,body').animate({scrollTop: targetOffset}, speed, easing);
    });
  }
});

답변

자 여러분, 이것은 작은 해결책이지만 잘 작동합니다.

다음 코드를 가정하십시오.

<div id='the_div_holder' style='height: 400px; overflow-y: scroll'>
  <div class='post'>1st post</div>
  <div class='post'>2nd post</div>
  <div class='post'>3rd post</div>
</div>

새 게시물이 ‘the_div_holder’에 추가되면 내부 콘텐츠 (div의 .post)가 채팅과 같은 마지막 게시물로 스크롤됩니다. 따라서 새로운 .post가 기본 div 홀더에 추가 될 때마다 다음을 수행하십시오.

var scroll = function(div) {
    var totalHeight = 0;
    div.find('.post').each(function(){
       totalHeight += $(this).outerHeight();
    });
    div.scrollTop(totalHeight);
  }
  // call it:
  scroll($('#the_div_holder'));

답변

먼저 jQuery position () 메소드로 스크롤하려는 div 요소의 위치를 ​​가져옵니다.
예 : var pos = $ ( “div”). position ();

그런 다음 ” .top “메소드를 사용 하여 해당 요소의 y 좌표 (높이)를 가져옵니다 .
예 : pos.top;
그런 다음 ” .left “메소드를 사용하여 해당 div 요소의 x 좌표를 가져옵니다 .
이 메소드는 CSS 위치 지정에서 시작됩니다.
x & y 좌표를 얻으면 javascript의 scrollTo ()를 사용할 수 있습니다 . 방법.
이 방법은 문서를 특정 높이와 너비로 스크롤합니다.
x 및 y 좌표로 두 개의 매개 변수를 사용합니다. 구문 : window.scrollTo (x, y);

그런 다음 scrollTo () 함수 에서 DIV 요소의 x 및 y 좌표를 전달하십시오 .
아래 예를 참조하십시오 ↓ ↓

<!DOCTYPE HTML>
    <html>
    <head>
        <title>
            Scroll upto Div with jQuery.
        </title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script>
            $(document).ready(function () {
                $("#button1").click(function () {
                    var x = $("#element").position(); //gets the position of the div element...
                    window.scrollTo(x.left, x.top); //window.scrollTo() scrolls the page upto certain position....
                    //it takes 2 parameters : (x axis cordinate, y axis cordinate);
                });
            });
            </script>
    </head>
    <body>
        <button id="button1">
            Click here to scroll
        </button>

        <div id="element" style="position:absolute;top:200%;left:0%;background-color:orange;height:100px;width:200px;">
            The DIV element.
            </div>
        </body>
    </html>

답변

이것들도 필요 없습니다. <a> 태그의 href에 div id 를 추가하기 만하면됩니다.

<li><a id = "aboutlink" href="#about">auck</a></li>

그냥 그렇게