Tôi muốn làm cho trình duyệt cuộn trang đến một neo nhất định, chỉ bằng cách sử dụng JavaScript.

Tôi đã chỉ định một namehoặc idthuộc tính trong mã HTML của mình:

 <a name="anchorName">..</a>

hoặc là

 <h1 id="anchorName2">..</h1>

Tôi muốn có được hiệu ứng tương tự như bạn nhận được bằng cách điều hướng đến http://server.com/path#anchorName. Trang nên được cuộn để neo ở gần đầu của phần hiển thị của trang.

function scrollTo(hash) {
    location.hash = "#" + hash;
}

Không yêu cầu jQuery nào cả!

Cách đơn giản hơn:

var element_to_scroll_to = document.getElementById('anchorName2');
// Or:
var element_to_scroll_to = document.querySelectorAll('.my-element-class')[0];
// Or:
var element_to_scroll_to = $('.my-element-class')[0];
// Basically `element_to_scroll_to` just have to be a reference
// to any DOM element present on the page
// Then:
element_to_scroll_to.scrollIntoView();

Bạn có thể sử dụng jQuery .animate () , .offset () và scrollTop. Giống

$(document.body).animate({
    'scrollTop':   $('#anchorName2').offset().top
}, 2000);

liên kết ví dụ: http://jsbin.com/unasi3/edit

Nếu bạn không muốn làm động, hãy sử dụng .scrollTop () như

$(document.body).scrollTop($('#anchorName2').offset().top);

hoặc javascripts location.hashgiống như

location.hash = '#' + anchorid;

Giải pháp tuyệt vời của jAndy, nhưng cuộn trơn tru dường như có vấn đề khi làm việc trong firefox.

Viết nó theo cách này cũng hoạt động trong Firefox.

(function($) {
    $(document).ready(function() {
         $('html, body').animate({
           'scrollTop':   $('#anchorName2').offset().top
         }, 2000);
    });
})(jQuery);

2018-2020 js tinh khiết:

Có một cách rất thuận tiện để cuộn đến phần tử:

el.scrollIntoView({
  behavior: 'smooth', // smooth scroll
  block: 'start' // the upper border of the element will be aligned at the top of the visible part of the window of the scrollable area.
})

Nhưng theo tôi hiểu thì anh ta không có sự hỗ trợ tốt như các lựa chọn dưới đây.

Tìm hiểu thêm về phương pháp.

Nếu cần thiết là phần tử nằm ở trên cùng:

const element = document.querySelector('#element')
const topPos = element.getBoundingClientRect().top + window.pageYOffset

window.scrollTo({
  top: topPos, // scroll so that the element is at the top of the view
  behavior: 'smooth' // smooth scroll
})

Ví dụ trình diễn trên Codepen

Nếu bạn muốn phần tử nằm ở trung tâm:

const element = document.querySelector('#element')
const rect = element.getBoundingClientRect() // get rects(width, height, top, etc)
const viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

window.scroll({
  top: rect.top + rect.height / 2 - viewHeight / 2,
  behavior: 'smooth' // smooth scroll
});

Ví dụ trình diễn trên Codepen

Ủng hộ:

Họ viết đó scrolllà phương pháp tương tự nhưscrollTo , nhưng hỗ trợ cho thấy tốt hơn trong scrollTo.

Thêm về phương pháp

Một giải pháp javascript thuần túy không có JQuery. Đã thử nghiệm trên Chrome & Ie, không được thử nghiệm trên iOS

function ScrollTo(name) {
  ScrollToResolver(document.getElementById(name));
}

function ScrollToResolver(elem) {
  var jump = parseInt(elem.getBoundingClientRect().top * .2);
  document.body.scrollTop += jump;
  document.documentElement.scrollTop += jump;
  if (!elem.lastjump || elem.lastjump > Math.abs(jump)) {
    elem.lastjump = Math.abs(jump);
    setTimeout(function() { ScrollToResolver(elem);}, "100");
  } else {
    elem.lastjump = null;
  }
}

bản demo: https://jsfiddle.net/jd7q25hg/12/

Năm 2018, bạn không cần jQuery cho một cái gì đó đơn giản như thế này. Việc xây dựng trong scrollIntoView()phương pháp hỗ trợ "behavior " tài sản để di chuyển thông suốt đến bất kỳ yếu tố trên trang. Bạn thậm chí có thể cập nhật URL trình duyệt bằng hàm băm để làm cho nó có thể đánh dấu được.

Từ hướng dẫn này về cách cuộn Dấu trang HTML , đây là một cách tự nhiên để thêm cuộn dễ dàng vào tất cả các liên kết neo trên trang của bạn:

let anchorlinks = document.querySelectorAll('a[href^="#"]')
 
for (let item of anchorlinks) { // relitere 
    item.addEventListener('click', (e)=> {
        let hashval = item.getAttribute('href')
        let target = document.querySelector(hashval)
        target.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
        })
        history.pushState(null, null, hashval)
        e.preventDefault()
    })
}

Di chuyển nhẹ nhàng đến vị trí thích hợp (2019)

Nhận phối hợp chính xác y và sử dụngwindow.scrollTo({top: y, behavior: 'smooth'})

const id = 'anchorName2';
const yourElement = document.getElementById(id);
const y = yourElement.getBoundingClientRect().top + window.pageYOffset;

window.scrollTo({top: y, behavior: 'smooth'});

Có bù

scrollIntoViewcũng là một lựa chọn tốt nhưng nó có thể không hoạt động hoàn hảo trong một số trường hợp. Ví dụ khi bạn cần bù thêm . Với scrollTobạn chỉ cần thêm phần bù như thế này:

const yOffset = -10; 

window.scrollTo({top: y + yOffset, behavior: 'smooth'});

$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000

Giải pháp từ CSS-Tricks không còn hoạt động trong jQuery 2.2.0. Nó sẽ đưa ra một lỗi chọn:

Lỗi thời gian chạy JavaScript: Lỗi cú pháp, biểu thức không được nhận dạng: a [href * = #]: không ([href = #])

Tôi đã sửa nó bằng cách thay đổi bộ chọn. Đoạn trích đầy đủ là đây:

$(function() {
  $("a[href*='#']:not([href='#'])").click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
 });
});

Hầu hết các câu trả lời là phức tạp không cần thiết.

Nếu bạn chỉ muốn nhảy tới phần tử mục tiêu, bạn không cần JavaScript:

# the link:
<a href="#target">Click here to jump.</a>

# target element:
<div id="target">Any kind of element.</div>

Nếu bạn muốn cuộn đến mục tiêu một cách sinh động , vui lòng tham khảo câu trả lời của @ Shahil.

Những công việc này:

$('.scroll').on("click", function(e) {

  e.preventDefault();

  var dest = $(this).attr("href");

  $("html, body").animate({

    'scrollTop':   $(dest).offset().top

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

Chỉ cần thêm lớp 'cuộn' vào bất kỳ liên kết nào bạn muốn tạo hiệu ứng

Đây là một kịch bản làm việc sẽ cuộn trang đến neo. Để thiết lập, chỉ cần cung cấp cho liên kết neo một id khớp với thuộc tính tên của neo mà bạn muốn cuộn đến.

<script>
jQuery(document).ready(function ($){ 
 $('a').click(function (){ 
  var id = $(this).attr('id');
  console.log(id);
  if ( id == 'cet' || id == 'protein' ) {
   $('html, body').animate({ scrollTop: $('[name="' + id + '"]').offset().top}, 'slow'); 
  }
 }); 
});
</script>

Tôi biết đây là câu hỏi thực sự cũ, nhưng tôi đã tìm thấy một giải pháp jQuery đơn giản và dễ dàng trong các thủ thuật css . Đó là cái tôi đang sử dụng.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

một giải pháp vue2 ... thêm thuộc tính dữ liệu đơn giản để buộc cập nhật

  const app = new Vue({ 
  ... 

  , updated: function() {
           this.$nextTick(function() {
           var uri = window.location.href
           var anchor = ( uri.indexOf('#') === -1 ) ? '' : uri.split('#')[1]
           if ( String(anchor).length > 0 && this.updater === 'page_load' ) {
              this.updater = "" // only on page-load !
              location.href = "#"+String(anchor)
           }
         })
        }
     });
     app.updater = "page_load"

 /* smooth scrolling in css - works in html5 only */
 html, body {
     scroll-behavior: smooth;
 }

cách dễ nhất để làm cho trình duyệt cuộn trang đến một neo nhất định là nhập kiểu style.css * {scroll-behavior: smooth;} và trong điều hướng html của bạn, hãy sử dụng #NameOfTheSection

*{scroll-behavior: smooth;}

<a href="#scroll-to">Home<a/>

<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>

<section id="scroll-to">
<p>it will scroll down to this section</p>
</section>