Saya ingin membuat browser untuk menggulir halaman ke jangkar yang diberikan, hanya dengan menggunakan JavaScript.

Saya telah ditentukan nameatau idatribut dalam kode HTML saya:

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

atau

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

Saya ingin mendapatkan efek yang sama dengan yang Anda dapatkan dengan menavigasi ke http://server.com/path#anchorName. Halaman tersebut harus digulir sehingga jangkar berada di dekat bagian atas halaman yang terlihat.

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

Tidak diperlukan jQuery sama sekali!

Cara yang lebih sederhana:

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

Anda dapat menggunakan jQuerys .animate () , .offset () dan scrollTop. Suka

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

contoh tautan: http://jsbin.com/unasi3/edit

Jika Anda tidak ingin menghidupkan gunakan .scrollTop () suka

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

atau javascripts asli location.hashsuka

location.hash = '#' + anchorid;

Solusi hebat oleh jAndy, tetapi gulir yang mulus tampaknya mengalami masalah saat bekerja di firefox.

Menulisnya dengan cara ini juga berfungsi di Firefox.

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

2018-2020 Murni js:

Ada cara yang sangat mudah untuk menggulir ke elemen:

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

Tetapi sejauh yang saya mengerti dia tidak memiliki dukungan yang baik seperti opsi di bawah ini.

Pelajari lebih lanjut tentang metode ini.

Jika perlu, elemen ada di atas:

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

Contoh demonstrasi pada Codepen

Jika Anda ingin elemen berada di tengah:

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

Contoh demonstrasi pada Codepen

Dukung:

Mereka menulis itu scrolladalah metode yang sama scrollTo, tetapi dukungan menunjukkan lebih baik scrollTo.

Lebih lanjut tentang metode ini

Solusi javascript murni tanpa JQuery. Diuji pada Chrome & Ie, tidak diuji pada 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;
  }
}

demo: https://jsfiddle.net/jd7q25hg/12/

Pada 2018, Anda tidak perlu jQuery untuk hal sederhana seperti ini. Dibangun di scrollIntoView()Metode mendukung "behavior " properti untuk lancar gulir ke setiap elemen pada halaman. Anda bahkan dapat memperbarui URL peramban dengan hash agar dapat dibookmark.

Dari tutorial tentang cara menggulir Penanda HTML , berikut adalah cara asli untuk menambahkan pengguliran yang lancar ke semua tautan jangkar pada halaman Anda secara otomatis:

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

Gulir dengan lancar ke posisi yang tepat (2019)

Dapatkan koordinat yang benar y dan gunakanwindow.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'});

Dengan offset

scrollIntoViewjuga merupakan pilihan yang baik tetapi dalam beberapa kasus mungkin tidak berfungsi dengan baik. Misalnya saat Anda membutuhkan tambahan offset . Dengan scrollToAnda hanya perlu menambahkan offset itu seperti ini:

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

Solusi dari CSS-Trik tidak lagi berfungsi di jQuery 2.2.0. Ini akan menimbulkan kesalahan pemilih:

JavaScript runtime error: Kesalahan sintaksis, ekspresi tidak dikenal: a [href * = #]: tidak ([href = #])

Saya memperbaikinya dengan mengubah pemilih. Cuplikan lengkapnya adalah ini:

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

Sebagian besar jawaban tidak perlu rumit.

Jika Anda hanya ingin melompat ke elemen target, Anda tidak perlu JavaScript:

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

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

Jika Anda ingin menggulir ke target dengan animasi , silakan merujuk ke jawaban @ Shahil.

Ini bekerja:

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

  e.preventDefault();

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

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

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

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

Cukup tambahkan kelas 'gulir' ke tautan apa pun yang ingin Anda menghidupkan

Ini adalah skrip yang berfungsi yang akan menggulir halaman ke jangkar. Untuk mensetup, beri tautan anchor id yang cocok dengan atribut nama anchor yang ingin Anda gulir.

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

Saya tahu ini adalah pertanyaan yang sudah sangat lama, tetapi saya menemukan solusi jQuery yang mudah dan sederhana di css-trik . Itu yang saya gunakan sekarang.

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

solusi vue2 ... tambahkan properti data sederhana untuk hanya memaksa pembaruan

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

cara termudah untuk membuat peramban menggulir laman ke jangkar yang diberikan adalah dengan mengetik style.css * {scroll-behaviour: smooth;} dan di navigasi html Anda gunakan #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>