Ich möchte den Browser dazu bringen, die Seite mit JavaScript zu einem bestimmten Anker zu scrollen.

Ich habe in meinem HTML-Code ein nameoder idAttribut angegeben :

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

oder

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

Ich möchte den gleichen Effekt erzielen, den Sie durch Navigieren erzielen würden http://server.com/path#anchorName. Die Seite sollte so gescrollt werden, dass sich der Anker oben im sichtbaren Teil der Seite befindet.

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

Keine jQuery erforderlich!

Viel einfacher:

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

Sie können jQuerys .animate () , .offset () und verwenden scrollTop. Mögen

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

Beispiellink: http://jsbin.com/unasi3/edit

Wenn Sie nicht animieren möchten, verwenden Sie .scrollTop () wie

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

oder Javascripts native location.hashwie

location.hash = '#' + anchorid;

Tolle Lösung von jAndy, aber die glatte Schriftrolle scheint Probleme mit Firefox zu haben.

Das Schreiben auf diese Weise funktioniert auch in Firefox.

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

2018-2020 Pure js:

Es gibt eine sehr bequeme Möglichkeit, zum Element zu scrollen:

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

Aber soweit ich weiß, hat er keine so gute Unterstützung wie die folgenden Optionen.

Erfahren Sie mehr über die Methode.

Wenn es notwendig ist, dass sich das Element oben befindet:

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

Demonstrationsbeispiel für Codepen

Wenn Sie möchten, dass sich das Element in der Mitte befindet:

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

Demonstrationsbeispiel für Codepen

Unterstützung:

Sie schreiben, dass dies scrolldie gleiche Methode ist wie scrollTo, aber die Unterstützung zeigt sich besser in scrollTo.

Mehr zur Methode

Eine reine Javascript-Lösung ohne JQuery. Getestet auf Chrome & Ie, nicht getestet auf 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/

Im Jahr 2018 benötigen Sie jQuery für so etwas Einfaches nicht. Die integrierte scrollIntoView()Methode unterstützt eine " behavior" -Eigenschaft, mit der Sie problemlos zu einem beliebigen Element auf der Seite scrollen können. Sie können die Browser-URL sogar mit einem Hash aktualisieren, um sie als Lesezeichen zu speichern.

In diesem Tutorial zum Scrollen von HTML-Lesezeichen finden Sie eine native Methode, um allen Ankerlinks auf Ihrer Seite automatisch einen reibungslosen Bildlauf hinzuzufügen:

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

Scrollen Sie sanft zur richtigen Position (2019)

Holen Sie sich die richtige y Koordinate und verwendenwindow.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'});

Mit Versatz

scrollIntoViewist auch eine gute Option, funktioniert aber in einigen Fällen möglicherweise nicht perfekt. Zum Beispiel, wenn Sie zusätzlichen Versatz benötigen . Mit müssen scrollToSie nur diesen Offset wie folgt hinzufügen:

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

Die Lösung von CSS-Tricks funktioniert in jQuery 2.2.0 nicht mehr. Es wird ein Auswahlfehler ausgegeben:

JavaScript-Laufzeitfehler: Syntaxfehler, nicht erkannter Ausdruck: a [href * = #]: not ([href = #])

Ich habe es durch Ändern des Selektors behoben. Das vollständige Snippet lautet:

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

Die meisten Antworten sind unnötig kompliziert.

Wenn Sie nur zum Zielelement springen möchten, benötigen Sie kein JavaScript:

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

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

Wenn Sie animiert zum Ziel scrollen möchten, lesen Sie bitte die Antwort von @ Shahil.

Das funktioniert:

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

  e.preventDefault();

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

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

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

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

Fügen Sie einfach die Klasse 'scroll' zu allen Links hinzu, die Sie animieren möchten

Dies ist ein funktionierendes Skript, mit dem die Seite zum Anker gescrollt wird. Zum Einrichten geben Sie dem Ankerlink einfach eine ID, die dem Namensattribut des Ankers entspricht, zu dem Sie einen Bildlauf durchführen möchten.

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

Ich weiß, dass diese Frage wirklich alt ist, aber ich habe in CSS-Tricks eine einfache und einfache jQuery-Lösung gefunden . Das ist der, den ich jetzt benutze.

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

eine vue2-Lösung ... fügen Sie eine einfache Dateneigenschaft hinzu, um die Aktualisierung einfach zu erzwingen

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