programing

jQuery를 사용하여 div로 스크롤

mailnote 2023. 8. 14. 23:02
반응형

jQuery를 사용하여 div로 스크롤

그래서 저는 측면에 고정 링크 바가 있는 페이지를 가지고 있습니다.다른 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, 그것은 있습니다.contacts디브!

사이드바에 있습니다.contact당신이 가지고 있는 페이지 하단의 디브에서.contacts나는 결승전을 치웠습니다.s코드 샘플용입니다.(또한 철자가 틀렸습니다.projectslink사이드바에 있는 ID).

두 번째로, jQuery 참조 페이지의 클릭 예를 살펴봅니다.클릭 좋아요를 사용해야 합니다.object.click( function() { // Your code here } );클릭 이벤트 핸들러를 개체에 바인딩하려면...아래의 예와 같이.별도로, 다음과 같은 인수 없이 객체를 사용하여 클릭을 트리거할 수도 있습니다.object.click().

셋째,scrollTojQuery의 플러그인입니다.플러그인이 설치되어 있는지 모르겠습니다.사용할 수 없습니다.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);
});

실시간 예제

(스크롤하여 다음에서 가져온 기능으로 이동합니다.여기)

PS: 분명히 앵커 태그를 사용하는 대신 이 경로를 가야 하는 강력한 이유가 있어야 합니다.<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 functions맘에 들다.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>

새 게시물이 '_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 요소의 위치를 가져옵니다.
예: varpos = $("div").위치();
그런 다음 ".top" 방법을 사용하여 해당 요소의 y 좌표(높이)를 가져옵니다.
pos. 예: 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를 추가하기만 하면 됩니다.

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

바로 그것처럼.

언급URL : https://stackoverflow.com/questions/3432656/scroll-to-a-div-using-jquery

반응형

'programing' 카테고리의 다른 글

크롬 개발자 도구에서 사람이 읽을 수 있는 자바스크립트  (0) 2023.08.14
도커 컨테이너에 AWS 자격 증명을 전달하는 가장 좋은 방법은 무엇입니까?  (0) 2023.08.14
JavaScript에서 마지막 슬래시 뒤에 있는 문자열 값 가져오기  (0) 2023.08.14
중간 텍스트의 최대 길이?  (0) 2023.08.14
사용자가 Swift로 이미지를 선택할 수 있도록 하는 방법은 무엇입니까?  (0) 2023.08.14

'programing'의 다른글

  • 현재글jQuery를 사용하여 div로 스크롤

관련글

댓글

티스토리툴바