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

176

vì vậy tôi có một trang có 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 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 trình đơn ở bên cạnh. Đây là jquery tôi có cho đến nayDi chuyển đến một div bằng cách sử dụng jquery

$(document).ready(function() { 

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

});

Vấn đề là nó sẽ tự động đi đến div xúc khi nó tải, sau đó khi tôi bấm #contactlink trong menu nó 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>

Thanks for the help

Nguồn

2010-08-08 tshauck

nào html trông như thế nào cho nơi liên kết tiếp xúc nên được? –

Đây có thể là bản sao của lưu lượng truy cập http: // stackoverflow.com/questions/1193414/scrolling-a-div-with-jquery –

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

295

Đầu tiên, mã của bạn không chứa một div contact, nó có một div contacts!

Trong thanh bên, bạn có contact trong div ở cuối trang bạn có contacts. Tôi đã xóa s cuối cùng cho mẫu mã. (bạn cũng đã viết sai chính tả mã số projectslink trong thanh bên).

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

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

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

Mã bên dưới sẽ cuộn đến div chính xác nếu bạn nhấp vào liên kết trong thanh bên. Cửa sổ không phải đủ lớn để cho phép di chuyể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);   
});

Live Example

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

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

Nguồn

2010-08-08 01:17:13

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

Liên kết tham chiếu đã chết – evanmcd

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

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

Ví dụ:

$(window).scrollTop(200);

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

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

Ví dụ:

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

này nên di chuyển các yếu tố #contact vào xem.

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

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

true chỉ ra rằng nguyên tố này được đặt ở phía trên trong khi false sẽ đặt nó trên dưới cùng của giao diện. Điều tốt đẹp với phương pháp jQuery là, bạn thậm chí có thể sử dụng nó với fx functions như .animate(). Vì vậy, bạn có thể làm mịn cuộn một cái gì đó.

tham khảo: .scrollTop(), .position(), .offset()

Nguồn

2010-08-08 01:02:53 jAndy

Tôi e rằng tôi vẫn gặp sự cố tương tự. Trang tải được cuộn xuống trang một số tiền nhất định, không phải là số liên lạc div tho và liên kết cũng không đưa tôi đến div liên hệ. Cảm ơn tho. EDIT: nói rằng tôi là khoảng cách các divs ra bằng cách sử dụng hàng đầu với css, điều này sẽ gây ra nó để đi đến địa điểm sai? Chỉ là một ý nghĩ. – tshauck

Thêm chức năng này ít 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); 
    }); 
    } 
});

Nguồn

2010-08-08 02:27:07 Ryan

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

giả đ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 viết mới được thêm vào 'the_div_holder' sau đó nó cuộn nội dung bên trong của nó (.post của div) để người cuối cùng như một cuộc trò chuyện. Vì vậy, làm những điều sau đây bất cứ khi nào một .post mới được thêm vào cho chủ 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'));

Nguồn

2013-03-20 01:58:47 christian

bạn có thể thử:

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

Nguồn

2014-08-25 14:03:19

Đầu tiên có được vị trí của phần tử div tối đa mà u muốn di chuyển bằng phương thức position() của jQuery.
Ví dụ: var pos = $ ("div"). Position();
Sau đó nhận được y cordinates (chiều cao) của phần tử đó với phương thức ".top".
Ví dụ: pos.top;
Sau đó nhận được x cordinates của phần tử div đó với 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 x & y cordinates, sau đó chúng tôi có thể sử dụng javascript scrollTo(); phương pháp.
Phương pháp này cuộn tài liệu lên đến chiều cao cụ thể & chiều rộng.
Phải mất hai tham số là x & y cordinates. Cú pháp: window.scrollTo (x, y);
Sau đó, chỉ cần vượt qua x & điểm cuối 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>

Nguồn

2015-04-26 06:41:11

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

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

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

Trả lời

Các vấn đề liên quan