jquery를 사용하여 div로 스크롤

205

측면에 고정 링크 표시 줄이있는 페이지가 있습니다. 다른 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>

도와 주셔서 감사합니다

jquery scroll

— sha
소스

연락처 링크의 위치는 어떻게됩니까?

— James Black

이것은 stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery

— James Black

3

평범한 오래된 앵커 대신 jQuery를 사용하는 이유가 있습니까?

— brianpeiris

2

@James-그것은 실제로 중복되지 않습니다. 이 질문은 페이지를 특정 div로 스크롤합니다. 이 질문은 어떤 div가 표시되는지에 관계없이 정의 된 증분으로 페이지를 스크롤합니다.

— Peter Ajtai

이것은 정말 좋습니다 : css-tricks.com/snippets/jquery/smooth-scrolling . 나를 위해 일했다.

— maahd

342

먼저 코드에 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>

— 피터 아지 타이
소스

그것이 도움이 된 것을 알게되어 기쁘지만, 나는 당신이 "피클"을 의미한다고 생각합니다.

— Peter Ajtai

처음 클릭 할 때 스크롤되지 않습니다. : / 두 번째 클릭하면 작동합니다.

— Burak Karakuş

다음과 같이 href에 ID를 넣는 것이 더 논리적이라고 생각합니다. href = "# about" jsfiddle.net/onigetoc/w5muyern

— Gino

처음에는 작동하지 않습니다. 두 번째를 클릭하면 완벽하게 작동합니다.

— Satish Singh

115

.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 ()

— 얀디
소스

여전히 비슷한 문제가 발생합니다. 연락처가 아닌 특정 페이지가 페이지 아래로 스크롤되어 링크가 연락처 div로 이동하지 않습니다. 고마워요 편집 : css와 함께 top을 사용하여 div를 띄우고 있다고 말하면 잘못된 위치로 이동합니까? 그냥 생각이야

— tshauck

22

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

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

— IT 블로그
소스

13

이 작은 기능을 추가하고 다음과 같이 사용하십시오. $('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);
    });
  }
});

— 라이언
소스

6

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

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

<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'));

— 신자
소스

3

먼저 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>

— 사이 예드 살만
소스

그리고 건초는 당신이 한 일에 대한 텍스트 설명을 추가하지만, 그다지 의미가 없습니다 .. !!

— Clain Dsilva

@ClainDsilva가 말했듯이 텍스트 설명을 추가하십시오.

— SreekanthGS

-1

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

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

그냥 그렇게

— 아르 민 악 라흐
소스

이것에 더 많은 빛을 던져주세요. 그것은 나를 위해 작동하지 않았다.

— Ifesinachi Bryan