jQuery cuộn đến phần tử

2325

Tôi có inputyếu tố này :

<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 kiểu nhập văn bản khác, textareas, v.v.

Khi người dùng nhấp vào đó inputvới #subject, trang nên di chuyển đến yếu tố cuối cùng của trang với một hình ảnh động đẹp. Nó nên 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à một submitnút có #submit:

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

Hoạt hình không nên quá nhanh và nên trôi chảy.

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 mà sử dụng các tính năng jQuery mặc định để đạt được điều này.

javascript  jquery  scroll 
— DiegoP.
nguồn
3
— Barshe Roussy
scrollTođã bị vô hiệu hóa đối với tôi vì một plugin chrome, không chắc chắn.
— Jacksonkr

Câu trả lời:

4021

Giả sử bạn có một nút với 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 nhẹ nhàng đến một phần tử không có plugin jQuery . Và tôi đã thử 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>
Mở rộng đoạn trích

— Steve
nguồn
24
Điều này sẽ không hoạt động trong mọi trường hợp. Xem stackoverflow.com/questions/2905867/ từ
— Jāni Elmeris
7
@BarryChapman không chính xác. Sau khi googling tôi đã tìm thấy cái này , vì vậy cả hai thẻ đều 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
73
Nếu bạn không muốn hoạt hình, và thay vào đó muốn chuyển ngay đến phần tử, hãy sử dụng .scrollTop(…)thay vì .animate({scrollTop: …}, …).
— Rory O'Kane
11
Ngoài giải pháp của bạn (hoạt động rất tốt), bạn có thể thêm một chức năng hoàn chỉnh có thêm hashtag vào url. Trong trường hợp này, nó sẽ không cuộn, bởi vì cuộn Để cuộn đến đúng vị trí và nếu người dùng sao chép URL, nó sẽ tự động chụp đến đúng vị trí trên trang.
— Sander
10
nếu bạn sử dụng một cuộc 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 phần nội dung html Cảm ơn @TJ Crowder.. stackoverflow.com/questions/8790752/...
— BoatCode
526

Phương thức jQuery .scrollTo ()

jQuery .scrollTo (): Xem - Bản trình diễn, API, Nguồn

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

Ví dụ sử dụng:

$('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ố cho biết vị trí cuộn mong muốn.

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

thời lượng : Một chuỗi hoặc số xác định thời gian hoạt hình sẽ chạy.

nới lỏng : Một chuỗi chỉ ra chức năng nới lỏng nào được sử dụng cho quá trình chuyển đổi.

hoàn thành : Một chức năng để gọi khi hoạt ảnh hoàn tất.

— Timothy Perez
nguồn
2
Nó đã hoạt động cho đến khi một bản 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/phzeriay-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
Đã sửa lỗi, hóa ra đó thực sự là một tệp JS từ jquery.com đã giết nó. Nên làm việc ngay bây giờ nếu bạn thử nó.
— Timothy Perez
4
@TimothyPerez: Tôi chắc chắn điều đó 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ó nhiều người muốn sử dụng đoạn mã đó ở bất cứ đâu trong trang web của họ và điều đó sẽ giúp họ ngủ dễ dàng hơn một chút vào ban đêm? Có lẽ một cái gì đó như giấy phép MIT có thể phù hợp với nhu cầu của bạn? vi.wikipedia.org/wiki/MIT_License
— Robert Massaioli
13
$ ('body') không hoạt động trong FF, vì vậy đã thử $ ('html, body') hoạt động.
— kiranvj
5
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
370

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 yếu tố cụ thể, bạn không yêu cầu một số chức năng 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 xuất phần tử DOM của JavaScript chứ không phải phần tử DOM của JQuery.

— Atharva
nguồn
12
Bạn cũng có thể sử dụng $(selector)[0]?
— RobW
16
RobW, vâng, bạn chỉ có thể sử dụng [0], nhưng get (0) bảo vệ bạn trước 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
21
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 thư viện ~ 100k chỉ để chọn một yếu tố và sau đó chuyển đổi nó thành JavaScript thông thường.
— Gavin
62
@Gavin Tôi chắc chắn rằng bạn có nghĩa là:document.getElementById('elementID').scrollIntoView()
— Brian
3
Mát mẻ. Nhưng trước khi sử dụng, hãy chắc chắn rằng trình duyệt hỗ trợ này. Theo Mozilla "Đây là một công nghệ thử nghiệm"
— Tejasvi Hegde
48

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ẽ sắp xếp theo thứ tự nếu tìm thấy thẻ băm trong url, cuộn để tạo hiệu ứng cho ID. Nếu không tìm thấy thẻ băm, sau đó bỏ qua tập lệnh.

— Warface
nguồn
$(window.location.hash)sẽ không hoạt động đối với các giá trị băm không đáp ứng phát hiện id regex của jQuery. Ví dụ, băm có chứa số. Nó cũng hơi nguy hiểm; định dạng của đầu vào phải được xác thực để cuối cùng bạn không chọn một yếu tố khác.
— dchacke
35 

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>
Mở rộng đoạn trích

— davidcondrey
nguồn
1
Để làm cho nó trở nên phổ quát hơn và để loại bỏ việc đặt hashtag không cần thiết vào cửa sổ liên kết trình duyệt, tôi chỉ cần điều chỉnh mã như sau:jQuery(document).ready(function($) { $(document).on( "click", 'a[href^="#"]', function( e ) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000); }); });
— bubencode
31

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ạ thay, giá trị trả về từ $("...").offset().topđôi khi trong float.
Sử dụng:parseInt($("....").offset().top)

Ví dụ:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});
— Tejasvi Hegde
nguồn
22

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

Cách sử dụng cơ bản: $('#your_element').scrollTo();

— Rezgar Cadro
nguồn
21

Đây là cách tôi làm.

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

Hoạt động trong mọi trình duyệt.

Nó có thể dễ dàng được bọc vào một chức năng

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

Đây là một ví dụ làm việc 

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})
.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>
Mở rộng đoạn trích

Tài liệu

— Evard Åkerberg
nguồn
6
Khá ngắn và ngọt ngào. Một điều cần lưu ý - Tôi nghĩ rằng điều này chỉ cuộn nó vào chế độ xem (có thể ở dưới cùng của chế độ xem) chứ không phải cuộn nó lên trên cùng của chế độ xem, như cài đặt scrollTop.
— OG Sean
20

Tôi biết một cách mà không có jQuery:

document.getElementById("element-id").scrollIntoView();

Chỉnh sửa: Đã hai năm và tôi vẫn ngẫu nhiên nhận được danh tiếng từ bài đăng này lmao

— GameMaster1928
nguồn
18

Nếu bạn chỉ xử lý cuộn đến một yếu tố đầu vào, bạn có thể sử dụng focus(). Ví dụ: nếu bạn muốn cuộn đến đầu vào hiển thị đầu tiên:

$(':input:visible').first().focus();

Hoặc đầu vào có thể nhìn thấy đầu tiên trong một thùng chứa với lớp .error:

$('.error :input:visible').first().focus();

Cảm ơn Tricia Ball đã chỉ ra điều này!

— Benjamin Oakes
nguồn
17

Với giải pháp này, bạn không cần bất kỳ plugin nào và không cần thiết lập ngoài việc đặt tập lệnh trước </body>thẻ đóng của bạn .

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

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

Khi tải, nếu có một hàm băm trong địa chỉ, chúng tôi cuộn đến nó.

Và - bất cứ khi nào bạn nhấp vào một aliên kết với hrefhàm băm #top, ví dụ , chúng tôi sẽ cuộn đến nó.

— Jonathan
nguồn
Điều này có lẽ nên > 1thay vì 0, chỉ vì /#nguyên nhân kịch bản này bị phá vỡ
— Tallboy
Về mặt kỹ thuật, bạn không nên kết thúc với một URL băm trống trừ khi các liên kết được xây dựng kém nhưng TY. (mặc dù phiên bản mã này của riêng tôi đã có bản vá này rồi ^^)
— Jonathan
Có một jitter liên quan đến mã này, tuy nhiên nó có thể dễ dàng sửa chữa. Bạn cần return false;ở cuối sự kiện nhấp chuột để ngăn hành động mặc định - ngay lập tức cuộn đến mỏ neo - xảy ra.
— roncli
2
@roncli điểm tốt - thay vào đó bạn chỉ có thể làme.preventDefault();
— Jonathan
e.preventDefault()tuy nhiên không cập nhật hàm băm trong url khi nhấp vào, nó luôn là một url không có hàm băm
— jayasurya_j
8

Trong hầu hết các trường hợp, tốt nhất là sử dụng plugin. Nghiêm túc. Tôi sẽ chào hàng ở đây . Tất nhiên cũng có những người khác. Nhưng vui lòng kiểm tra xem họ có thực sự tránh những cạm bẫy mà bạn muốn có plugin ngay từ đầu không - không phải tất cả chúng đều làm được.

Tôi đã viết về lý do sử dụng một plugin ở nơi khác . Tóm lại, một trong những lớp lót làm cơ sở cho hầu hết các câu trả lời ở đây

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

là UX xấu.

  • Hoạt hình không đáp ứng với hành động của người dùng. Nó tiếp tục ngay cả khi người dùng nhấp, chạm hoặc cố gắng cuộn.

  • Nếu điểm bắt đầu của hình ảnh động gần với phần tử đích thì hình động sẽ chậm một cách đau đớn.

  • Nếu phần tử đích được đặt gần cuối trang, nó không thể được cuộn lên trên cùng của cửa sổ. Hoạt hình cuộn dừng đột ngột sau đó, ở giữa chuyển động.

Để xử lý các vấn đề này (và một loạt các vấn đề khác ), bạn có thể sử dụng một plugin của tôi, jQuery.scrollable . Cuộc gọi sau đó trở thành

$( window ).scrollTo( targetPosition );

và đó là nó. Tất nhiên, có nhiều lựa chọn hơn .

Đối với vị trí mục tiêu, $target.offset().topcông việc trong hầu hết các trường hợp. Nhưng xin lưu ý rằng giá trị được trả về không có đường viền trên htmlphần tử ( xem bản demo này ). Nếu bạn cần vị trí mục tiêu chính xác trong mọi trường hợp, tốt hơn là sử dụng

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

Điều đó hoạt động ngay cả khi một đường viền trên thành htmlphần được đặt.

— trao đổi
nguồn
8

Ảnh động:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});
8

Nếu bạn muốn cuộn trong một thùng chứa tràn (thay vì $('html, body')trả lời ở trên), cũng làm việc với định vị tuyệt đối, đây là cách làm:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}
— FAjir
nguồn
7

Cách dễ dàng để đạt được cuộn trang để nhắm mục tiêu div id

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);
— Irshad Khan
nguồn
6

Đây là cách tiếp cận của tôi để trừu tượng hóa ID và href, sử dụng bộ chọn lớp chung

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>
Mở rộng đoạn trích

— vascAFpar
nguồn
6

Rất đơn giản và dễ sử dụng plugin jQuery tùy chỉnh. Chỉ cần thêm thuộc tính scroll=vào thành phần có thể nhấp của bạn và đặt giá trị của nó vào bộ chọn bạn muốn cuộn.

Giống như vậy : <a scroll="#product">Click me</a>. Nó có thể được sử dụng trên bất kỳ yếu tố.

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>
— DevWL
nguồn
4 
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};
— kayz1
nguồn
4

$('html, body').animate(...) không cho tôi trên iphone, trình duyệt android chrome safari.

Tôi đã phải nhắm mục tiêu yếu tố nội dung gốc của trang.

$ ('# cotnent'). animate (...)

Đây là những gì tôi đã kết thúc với

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

Tất cả nội dung cơ thể được kết nối với div #content

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
— Shahdat
nguồn
Bạn thực sự không nên sử dụng tác nhân đánh hơi. webaim.org/blog/user-agent-opes-history
— Alex Podworny
Thêm từ ngắt: break-all; yếu tố CSS của bạn đang gặp rắc rối. Vị trí webview trên Android / iOS jQuery.animate ({scrollTop: y}) không chính xác. Medium.com/@ellery.leung/ từ
— daliaessam
3 
$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);
3

Khi người dùng nhấp vào đầu vào đó bằng #subject, trang sẽ cuộn đến phần tử cuối cùng của trang với một hình ảnh động đẹp. Nó nên 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à nút gửi với #submit

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

Điều này trước tiên sẽ cuộn xuống để #submitsau đó khôi phục con trỏ trở lại đầu vào được nhấp, bắt chước cuộn xuống và hoạt động trên hầu hết các trình duyệt. Nó cũng không yêu cầu jQuery vì nó có thể được viết bằng JavaScript thuần.

Thời trang này có thể sử dụng focuschức năng bắt chước hoạt hình theo cách tốt hơn, thông qua focuscác cuộc gọi chuỗi . Tôi đã không kiểm tra lý thuyết này, nhưng nó sẽ trông giống như thế này:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>
— Khaled.K
nguồn
3

Tôi thiết lập một yếu tố cuộn mô-đun npm install scroll-element. Nó hoạt động như thế này:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

Được viết với sự giúp đỡ từ các bài viết SO sau:

Đây là mã:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}
— svnm
nguồn
2

Để hiển thị phần tử đầy đủ (nếu có thể với kích thước cửa sổ hiện tại):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);
— Pháp sư La Mã
nguồn
2

Tôi đã viết một hàm mục đích chung để cuộn đến một đối tượng jQuery, bộ chọn CSS hoặc một giá trị số.

Ví dụ sử dụng:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

Mã của hàm:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};
— isapir
nguồn
2

Đối với những gì đáng giá, đây là cách tôi quản lý để đạt được hành vi như vậy đối với một yếu tố chung có thể ở bên trong DIV khi cuộn. Trong trường hợp của chúng tôi, chúng tôi không cuộn toàn bộ cơ thể, mà chỉ là các yếu tố cụ thể với tràn: auto; trong một bố cục lớn hơn.

Nó tạo ra một đầu vào giả về chiều cao của phần tử đích, sau đó đặt trọng tâm vào nó và trình duyệt sẽ quan tâm đến phần còn lại cho dù bạn có ở sâu trong hệ thống phân cấp có thể cuộn của bạn. Hoạt động như một lá bùa.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();
— martinh_kentico
nguồn
2

Điều này làm việc cho tôi:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
— Bắc đẩu
nguồn
2 

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>
Mở rộng đoạn trích

— Mã não
nguồn
2

LÓT

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

Hiển thị đoạn mã

— Kamil Kiełczewski
nguồn
1
nó hoạt động hoàn hảo!
— jjoselon
1

Cập nhật câu trả lời vào năm 2019:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
— stardust4891
nguồn
Bạn nên chọn công cụ này cho phần thân: [document.documentEuity, document.body] VÀ Không cần phần bù cơ thể trong phương trình. $ ('# chủ đề'). offset (). top là đủ.
— ali6p
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.