Chciałbym, aby przeglądarka przewijała stronę do danej kotwicy, używając tylko JavaScript.

I została określona namelub idatrybut w moim kod HTML:

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

lub

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

Chciałbym uzyskać taki sam efekt, jak przy nawigowaniu do http://server.com/path#anchorName. Stronę należy przewinąć, aby kotwica znajdowała się w górnej części widocznej części strony.

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

W ogóle nie jest wymagane jQuery!

O wiele prościej:

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. Lubić

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

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

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

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

lub javascripts native location.hashjak

location.hash = '#' + anchorid;

Świetne rozwiązanie jAndy, ale wydaje się, że płynne przewijanie ma problemy z działaniem w firefoxie.

Pisanie w ten sposób działa również w przeglądarce Firefox.

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

2018-2020 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 on tak dobrego wsparcia, jak poniższe opcje.

Dowiedz się więcej o metodzie.

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

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

Przykład demonstracyjny na Codepen

Jeśli chcesz, aby element był na środku:

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 scrolljest to ta sama metoda scrollTo, ale wsparcie pokazuje się lepiej scrollTo.

Więcej o metodzie

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/

W 2018 roku nie potrzebujesz jQuery dla czegoś tak prostego. Wbudowana scrollIntoView()metoda obsługuje behaviorwłaściwość „ ” do płynnego przewijania dowolnego elementu na stronie. Możesz nawet zaktualizować adres URL przeglądarki za pomocą skrótu, aby uczynić go bukmacherskim.

Z tego samouczka na temat przewijania zakładek HTML , oto natywny sposób automatycznego dodawania płynnego przewijania do wszystkich linków zakotwiczenia na 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()
    })
}

Płynnie przewiń do właściwej pozycji (2019)

Uzyskaj poprawną y współrzędną i użyjwindow.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'});

Z przesunięciem

scrollIntoViewjest również dobrą opcją, ale w niektórych przypadkach może nie działać idealnie. Na przykład, gdy potrzebujesz dodatkowego przesunięcia . Po scrollToprostu musisz dodać to przesunięcie w następujący sposób:

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

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

Błąd czasu wykonania JavaScript: błąd składni, nierozpoznane wyrażenie: a [href * = #]: not ([href = #])

Naprawiłem to, zmieniając selektor. Pełny fragment kodu jest następujący:

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

Większość odpowiedzi jest niepotrzebnie skomplikowana.

Jeśli chcesz tylko przejść 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 chcesz animować przewijanie do celu , zapoznaj się z odpowiedzią @ Shahil.

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ę „przewiń” do wszystkich linków, które chcesz animować

To działający skrypt, który przewinie stronę do kotwicy. Aby skonfigurować, wystarczy podać link do kotwicy id, który odpowiada atrybutowi nazwy kotwicy, do której chcesz przewinąć.

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

Wiem, że to pytanie jest naprawdę stare, ale znalazłem łatwe i proste rozwiązanie jQuery w trikach css . 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;
      }
    }
  });
});

rozwiązanie vue2 ... dodaj prostą właściwość danych, aby po prostu wymusić aktualizację

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

najłatwiejszym sposobem, aby przeglądarka przewinęła stronę do danej kotwicy, jest wpisanie swojego style.css * {przewijanie: gładkie;}, a w nawigacji HTML użyj #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>