Di chuyển đến div bằng cách sử dụng jquery

205

vì vậy tôi có một trang có một thanh liên kết cố định ở bên cạnh. Tôi muốn cuộn đến các div khác nhau. Về cơ bản, trang này chỉ là một trang web dài, nơi tôi muốn cuộn đến các div khác nhau bằng cách sử dụng hộp menu sang một bên.

Đây là jquery tôi có cho đến nay

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

Vấn đề là nó sẽ tự động chuyển đến div liên hệ khi tải, sau đó khi tôi nhấn #contactlinktrong menu, nó sẽ cuộn trở lại đầu trang.

EDIT: 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>

Cảm ơn đã giúp đỡ

jquery scroll

— tshauck
nguồn

Html trông như thế nào khi liên kết liên hệ nên ở đâu?

— James Black

Đây có thể là bản sao của stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery

— James Black

3

Có lý do gì bạn đang sử dụng jQuery thay vì các neo cũ không?

— brianpeiris

2

@James - Đó không thực sự là một bản sao. Câu hỏi này cuộn một trang đến các div cụ thể. Câu hỏi đó cuộn một trang theo gia số được xác định (không phân biệt những gì div đang hiển thị).

— Peter Ajtai

Điều này thực sự tốt: css-tricks.com/snippets/jquery/smooth-scrolling . Đã làm cho tôi.

— maahd

342

Đầu tiên, mã của bạn không chứa contactdiv, nó có contactsdiv!

Trong thanh bên bạn có contacttrong div ở cuối trang bạn có contacts. Tôi đã loại bỏ cuối cùng scho mẫu mã. (bạn cũng viết sai chính tả projectslinkid trong thanh bên).

Thứ hai, hãy xem một số ví dụ để nhấp vào trang tham chiếu jQuery. Bạn phải sử dụng click like, object.click( function() { // Your code here } );để liên kết một trình xử lý sự kiện click vào đối tượng .... Giống như trong ví dụ của tôi dưới đây. Bên cạnh đó, bạn cũng có thể chỉ cần kích hoạt nhấp chuột vào một đối tượng bằng cách sử dụng nó mà không cần đối số, nhưobject.click() .

Thứ ba, scrollTolà một plugin trong jQuery. Tôi không biết nếu bạn đã cài đặt plugin. Bạn không thể sử dụng scrollTo()mà không có plugin. Trong trường hợp này, chức năng bạn mong muốn chỉ có 2 dòng mã, vì vậy tôi thấy không có lý do gì để sử dụng plugin.

Ok, bây giờ là một giải pháp.

Mã dưới đây sẽ cuộn đến div chính xác nếu bạn nhấp vào một liên kết trong thanh bên. Cửa sổ phải đủ lớn để cho phép cuộn:

// 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);
});

Ví dụ trực tiếp

~~(Di chuyển đến chức năng được lấy từ đây )~~

PS: Rõ ràng là bạn nên có một lý do thuyết phục để đi theo con đường này thay vì sử dụng thẻ neo <a href="#gohere">blah</a>...<a name="gohere">blah title</a>

— Peter Ajtai
nguồn

Vui mừng khi biết điều đó có ích, nhưng tôi nghĩ bạn có nghĩa là "dưa chua", mặc dù tôi thấy ăn chúng tốt hơn là thoát khỏi chúng.

— Peter Ajtai

Nó không cuộn ở lần nhấp đầu tiên. : / Tôi nhấp vào nó lần thứ hai và nó hoạt động.

— Burak Karakuş

Tôi nghĩ sẽ hợp lý hơn khi đặt ID vào href như thế này: href = "# about" jsfiddle.net/onigetoc/w5muyern

— Gino

nó không hoạt động lần đầu tiên Nhưng khi chúng ta bấm lần thứ 2 thì nó hoạt động hoàn hảo.

— Satish Singh

115

Không có .scrollTo()phương thức nào trong jQuery, nhưng có một phương thức .scrollTop(). .scrollTopmong đợi một tham số, nghĩa là giá trị pixel nơi thanh cuộn sẽ cuộn đến.

Thí dụ:

$(window).scrollTop(200);

sẽ cuộn cửa sổ (nếu có đủ nội dung trong đó).

Vì vậy, bạn có thể nhận được giá trị mong muốn này với .offset()hoặc.position() .

Thí dụ:

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

Điều này sẽ cuộn #contact phần tử vào xem.

Phương thức thay thế không phải của jQuery là .scrollIntoView(). Bạn có thể gọi phương thức đó trên bất kỳ DOM elementnhư:

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

truechỉ ra rằng phần tử được định vị ở trên cùng trong khi falsesẽ đặt nó ở dưới cùng của chế độ xem. Điều tuyệt vời với phương thức jQuery là, bạn thậm chí có thể sử dụng nó với fx functionslike .animate(). Vì vậy, bạn có thể di chuyển trơn tru một cái gì đó.

Tham khảo: .scrollTop () , .poseition () , .offset ()

— jAndy
nguồn

Tôi sợ rằng tôi vẫn gặp vấn đề tương tự. Tải trang đã cuộn xuống trang một số tiền nhất định, không phải là div liên hệ và liên kết cũng không đưa tôi đến div liên hệ. Cảm ơn tho. EDIT: giả sử tôi sắp xếp các div bằng cách sử dụng top với css, điều này có khiến nó đi sai chỗ không? Chỉ là một ý nghĩ.

— tshauck

22

bạn co thể thử :

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

— Vlog CNTT
nguồn

13

Thêm chức năng nhỏ này và sử dụng nó như vậy: $('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);
    });
  }
});

— Ryan
nguồn

6

OK, đây là một giải pháp nhỏ, nhưng nó hoạt động tốt.

giả sử đoạn mã sau:

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

bạn muốn khi một bài đăng mới được thêm vào 'the_div_holder' thì nó sẽ cuộn nội dung bên trong của nó (.post của div) đến bài cuối cùng như một cuộc trò chuyện. Vì vậy, hãy làm như sau mỗi khi một .post mới được thêm vào ngăn chứa div chính:

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

— christian
nguồn

3

Trước tiên, lấy vị trí của phần tử div mà bạn muốn cuộn theo phương thức vị trí jQuery ().
Ví dụ: var pos = $ ("div"). Position ();
Sau đó lấy y tuyến (chiều cao) của phần tử đó bằng phương thức " .top ".
Ví dụ: pos.top;
Sau đó lấy x dây của phần tử div đó bằng phương thức " .left ".
Các phương pháp này có nguồn gốc từ định vị CSS.
Khi chúng tôi nhận được kết quả x & y, sau đó chúng tôi có thể sử dụng scrollTo () của javascript ; phương pháp.
Phương pháp này cuộn tài liệu lên đến chiều cao và chiều rộng cụ thể.
Phải mất hai tham số là x & y sắp xếp. Cú pháp: window.scrollTo (x, y);
Sau đó, chỉ cần truyền các x & y của phần tử DIV trong hàm scrollTo () .
Tham khảo ví dụ dưới đâ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>

— Salman say
nguồn

Và hay thêm một số giải thích bằng văn bản về những gì bạn đã làm, chỉ là nó không có nhiều ý nghĩa .. !!

— Clain Dsilva

Như @ClainDsilva đã nói, vui lòng thêm một số giải thích bằng văn bản.

— SaletanthGS

-1

Không cần quá những thứ này. Chỉ cần thêm id id vào href của thẻ <a>

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

Chỉ cần như vậy.

— Armin Akhlagh
nguồn

Xin vui lòng, ném thêm ánh sáng về điều này. Nó không làm việc cho tôi.

— Ifesinachi Bryan