Câu hỏi jQuery cuộn đến phần tử


Tôi có cái này input thành phần:

<input type="text" class="textfield" value="" id="subject" name="subject">

Sau đó, tôi có một số yếu tố khác, như các yếu tố đầu vào văn bản khác, văn bản, v.v.

Khi người dùng nhấp vào đó input với #subject, trang sẽ cuộn đến phần tử cuối cùng của trang có hoạt ảnh đẹp. Nó phải là một cuộn xuống dưới và không lên trên.

Mục cuối cùng của trang là submit nút với #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

Hoạt ảnh không nên quá nhanh và phải là chất lỏng.

Tôi đang chạy phiên bản jQuery mới nhất. Tôi không muốn cài đặt bất kỳ plugin nào nhưng sử dụng các tính năng jQuery mặc định để đạt được điều này.


1875
2017-07-13 09:49


gốc




Các câu trả lời:


Giả sử bạn có một nút có id button, hãy thử ví dụ này:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Tôi nhận được mã từ bài viết Di chuyển mượt mà đến một phần tử không có plugin jQuery. Và tôi đã thử nghiệm nó trên ví dụ dưới đây.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


3481
2017-07-13 09:52



Điều này sẽ không hoạt động trong mọi trường hợp. Xem stackoverflow.com/questions/2905867/… - Jānis Elmeris
@BarryChapman không chính xác. Sau khi googling tôi đã tìm thấy điều này, vì vậy cả hai thẻ là cần thiết nếu bạn không muốn có thêm logic cho mỗi loại trình duyệt. - s3m3n
Nếu bạn không muốn hoạt ảnh, và thay vào đó muốn nhảy ngay lập tức đến phần tử, hãy sử dụng .scrollTop(…)thay vì .animate({scrollTop: …}, …). - Rory O'Kane
Ngoài giải pháp của bạn (hoạt động tuyệt vời), bạn có thể thêm chức năng hoàn chỉnh để thêm thẻ bắt đầu bằng # vào url. Trong trường hợp này, nó sẽ không cuộn, vì scrollTo đã được cuộn đến đúng vị trí và nếu người dùng sao chép URL, nó sẽ tự động chụp đúng vị trí trên trang. - Sander
nếu bạn sử dụng gọi lại để chạy khi hoạt ảnh hoàn tất và nhận thấy cuộc gọi lại kích hoạt hai lần với giải pháp này, hãy thử sử dụng "$ ('html body'). animate (..." thay vì "$ ('html, body') .animate (... "dấu phẩy tạo ra hai sự kiện animate. một cho html, một cho cơ thể. bạn thực sự chỉ muốn một cho cơ thể html Cảm ơn @TJ Crowder stackoverflow.com/questions/8790752/… - BoatCode


  jQuery .scrollTo() Method 

jQuery .scrollTo ():  Xem - Demo, API, Nguồn

Tôi đã viết plugin nhẹ này để làm cho trang / phần tử cuộn dễ dàng hơn nhiều. Đó là linh hoạt, nơi bạn có thể vượt qua trong một yếu tố mục tiêu hoặc giá trị quy định. Có lẽ đây có thể là một phần trong bản phát hành chính thức tiếp theo của jQuery, bạn nghĩ sao?


Sử dụng ví dụ:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Tùy chọn:

scrollTarget: Một phần tử, chuỗi hoặc số chỉ ra vị trí cuộn mong muốn.

offsetTop: Một số xác định khoảng cách bổ sung phía trên mục tiêu cuộn.

thời lượng: Chuỗi hoặc số xác định thời gian hoạt ảnh sẽ chạy.

nới lỏng: Một chuỗi cho biết chức năng nới lỏng để sử dụng cho quá trình chuyển đổi.

hoàn thành: Một hàm để gọi khi hoạt ảnh hoàn tất.


454
2017-10-05 08:50



Bản trình diễn không hoạt động trên chrome - alex
Nó đã hoạt động cho đến khi cập nhật gần đây trên chrome. Tôi có một phiên bản hoạt động mà tôi hiện đang sử dụng trên memoryboxweddings.com/photography-posts (nếu bạn muốn dùng thử). Tôi sẽ đăng một bản cập nhật khi nó đã được sửa. - Timothy Perez
@ TimothyPerez: Tôi chắc chắn rằng có nghĩa là một cái gì đó cho phép sử dụng thương mại? Tôi chắc chắn rằng có rất nhiều người muốn sử dụng đoạn mã đó ở bất kỳ đâu trên trang web của họ và điều đó sẽ giúp họ ngủ ngon hơn một chút vào ban đêm? Có lẽ một cái gì đó giống như giấy phép MIT có thể phù hợp với nhu cầu của bạn? en.wikipedia.org/wiki/MIT_License - Robert Massaioli
$ ('body') không hoạt động trong FF, vì vậy đã thử $ ('html, body') đã hoạt động. - kiranvj
Nếu bất cứ ai cần nguồn kịch bản này, thì ở đây bạn có thể lấy nó flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js - Arturs


Nếu bạn không quan tâm nhiều đến hiệu ứng cuộn mượt mà và chỉ quan tâm đến việc cuộn đến một phần tử cụ thể, bạn không cần một số hàm jQuery cho việc này. Javascript đã có trường hợp của bạn được bảo hiểm:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Vì vậy, tất cả những gì bạn cần làm là: $("selector").get(0).scrollIntoView(); 

.get(0) được sử dụng vì chúng tôi muốn truy lục phần tử DOM của JavaScript chứ không phải phần tử DOM của JQuery.


271
2017-12-24 11:35



Cảm ơn bạn, bạn có thể đưa ra sự khác biệt giữa phần tử DOM của JavaScript và của JQuery không. - Francisco Corrales Morales
Bạn cũng có thể sử dụng $(selector)[0]? - RobW
RobW, có bạn chỉ có thể sử dụng [0], nhưng nhận được (0) bảo vệ bạn chống lại các chỉ số không xác định hoặc tiêu cực. Xem nguồn: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get - corbacho
Nếu bạn không muốn sử dụng jQuery, chỉ cần sử dụng document.getElementById('#elementID').scrollIntoView(). Không sử dụng tải một thư viện ~ 100k chỉ để chọn một phần tử và sau đó chuyển nó thành JavaScript thông thường. - Gavin
@Gavin Tôi chắc chắn bạn có nghĩa là: document.getElementById('elementID').scrollIntoView() - Brian


Kiểm tra ScrollTo cắm vào. Bạn có thể xem bản trình diễn đây.

Tôi hy vọng nó sẽ giúp.


42
2017-07-13 11:05



Tôi nghĩ đáng chú ý là plugin của TimothyPerez bị giới hạn ở trục y, trong khi Ariel Flesler (liên kết trong câu trả lời này) là một bồn rửa nhà bếp hỗ trợ cả cuộn x và y, điều quan trọng là xem xét ví dụ khi một hộp thoại phương thức xuất hiện trên thiết bị di động hoặc thu hút sự chú ý đến một phần cụ thể của bảng hoặc biểu mẫu rộng trên thiết bị di động. - Chris Moschini


jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06





Sử dụng tập lệnh đơn giản này

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Sẽ làm cho sắp xếp rằng nếu một thẻ băm được tìm thấy trong url, scrollTo animate đến ID. Nếu không tìm thấy thẻ băm, thì hãy bỏ qua tập lệnh.


26
2017-09-05 11:53





Giải pháp của Steve và Peter hoạt động rất tốt.

Nhưng trong một số trường hợp, bạn có thể phải chuyển đổi giá trị thành số nguyên. Kỳ lạ, giá trị trả về từ $("...").offset().top đôi khi ở float.
Sử dụng: parseInt($("....").offset().top)

Ví dụ:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39





Một phiên bản nhỏ gọn của giải pháp "animate".

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Sử dụng cơ bản: $('#your_element').scrollTo();


15
2017-08-29 11:19