Sposób prostszy:

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

Możesz użyć jQuerys .animate(), .offset () i scrollTop. Jak

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

Przykładowy link: http://jsbin.com/unasi3/edit

Jeśli nie chcesz animować, użyj .scrollTop () like

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

Lub javascripts native location.hash Jak

location.hash = '#' + anchorid;

Świetne rozwiązanie autorstwa jAndy ' ego, ale płynne przewijanie wydaje się mieć problemy działające w Firefoksie.

Pisanie tego w ten sposób działa również w Firefoksie.

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

Czyste rozwiązanie javascript bez JQuery. Testowane na Chrome i IE, nie testowane na 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/

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

Większość odpowiedzi jest niepotrzebnie skomplikowana.

Jeśli chcesz po prostu przeskoczyć do elementu docelowego, nie potrzebujesz JavaScript:

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

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

Jeśli chceszprzewiń do celu animowane , zapoznaj się z odpowiedzią @Shahil.

Rozwiązanie z CSS-Tricks nie działa już w jQuery 2.2.0. Wyrzuci błąd selektora:

JavaScript runtime error: Syntax error, unrecognized expression: a [href*=#]: not ([href=#])

Naprawiłem to zmieniając selektor. Pełny fragment jest taki:

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

W 2018 roku, nie potrzebujesz jQuery do czegoś prostego jak to. Wbudowana metoda [scrollIntoView()][1] obsługuje właściwość "behavior " do płynnego przewijania do dowolnego elementu na stronie. Możesz nawet zaktualizować adres URL przeglądarki za pomocą skrótu, aby można go było księgować.

Z Ten samouczek na temat przewijania zakładek HTML , Oto natywny sposób na automatyczne dodawanie płynnego przewijania do wszystkich linków anchor na twojej stronie:

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

2018 Pure js:

Istnieje bardzo wygodny sposób przewijania do elementu:

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

Ale o ile rozumiem, nie ma tak dobrego wsparcia, jak opcje poniżej.

Dowiedz się więcej o metodzie.

Jeśli jest to konieczne, aby element był na górze:

const element = document.querySelector('#element')
const top = element.getBoundingClientRect().top

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

Przykład demonstracyjny na Codepen

Jeśli chcesz, aby element był w center:

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

Przykład demonstracyjny na Codepen

Wsparcie:

Piszą, że scroll jest tą samą metodą co scrollTo, ale wsparcie jest lepsze w scrollTo.

Więcej o metodzie

Wiem, że to pytanie jest naprawdę stare, ale znalazłem łatwe i proste rozwiązanie jQuery w css-tricks . Tego właśnie używam.

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

Jest to działający skrypt, który przewija stronę do zakotwiczenia. Aby skonfigurować, po prostu podaj link kotwicy id, który pasuje do atrybutu name kotwicy, do której chcesz przewijać.

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

To działa:

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

  e.preventDefault();

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

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

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

  }, 2000);

});

Https://jsfiddle.net/68pnkfgd/

Po prostu dodaj klasę "scroll" do wszystkich linków, które chcesz animować

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