it-swarm.com.de

Wie scrolle ich die HTML-Seite zum angegebenen Anker?

Ich möchte, dass der Browser die Seite zu einem bestimmten Anker bewegt, indem Sie einfach JavaScript verwenden.

Ich habe in meinem HTML-Code ein name- oder ein id-Attribut angegeben:

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

oder

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

Ich möchte den gleichen Effekt erzielen, den Sie erzielen würden, wenn Sie zu http://server.com/path#anchorName navigieren. Die Seite sollte so gescrollt werden, dass sich der Anker im oberen Bereich des sichtbaren Teils der Seite befindet.

209
Juha Syrjälä
function scrollTo(hash) {
    location.hash = "#" + hash;
}

Kein jQuery erforderlich!

300
Dean Harding

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 scrollTop verwenden. 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 () like

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

oder javascripts native location.hash gefällt

location.hash = '#' + anchorid;
121
jAndy

Große Lösung von jAndy, aber die glatte Bildlaufleiste 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);
30
5hahiL

Eine reine Javascript-Lösung ohne JQuery. Auf Chrome & I.e getestet, nicht auf IOS getestet

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/

24

2018 reine js:

Es gibt eine sehr bequeme Möglichkeit, zum Element zu blättern:

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 so weit ich weiß, hat er keine so gute Unterstützung wie die folgenden Optionen.

 enter image description here

Erfahren Sie mehr über die Methode.


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

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

Demonstrationsbeispiel auf 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 auf Codepen


Unterstützung:

 введите сюда описание изображения

Sie schreiben, dass scroll dieselbe Methode wie scrollTo ist, aber die Unterstützung in scrollTo besser ist.

Mehr über die Methode

Im Jahr 2018 brauchen Sie jQuery für etwas so einfaches nicht. Die integrierte [scrollIntoView()][1]-Methode unterstützt eine "behavior" -Eigenschaft, um problemlos zu einem beliebigen Element auf der Seite zu blättern. Sie können sogar die Browser-URL mit einem Hash aktualisieren, um sie als Lesezeichen zu markieren.

In diesem Tutorial zum Scrollen von HTML-Lesezeichen finden Sie eine native Methode zum automatischen Scrollen aller Anker-Links auf Ihrer Seite:

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()
    })
}
8
coco puffs
$(document).ready ->
  $("a[href^='#']").click ->
    $(document.body).animate
      scrollTop: $($(this).attr("href")).offset().top, 1000
6
cactis

Die meisten Antworten sind unnötig kompliziert.

Wenn Sie einfach springen zum Zielelement 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.

5
Brian

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

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

Ich habe das Problem behoben, indem ich den Wahlschalter gewechselt habe. Der vollständige Ausschnitt ist folgender:

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

2019 Scrollen Sie sanft zur richtigen Position

Holen Sie sich einfach korrekte Y Koordinate und verwenden Sie window.scrollTo.

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

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

Bildlauf mit Versatz reibungslos

scrollIntoView ist ebenfalls eine gute Option, funktioniert jedoch in einigen Fällen möglicherweise nicht einwandfrei. Zum Beispiel, wenn Sie benötigen zusätzlichen Versatz . Mit scrollTo müssen Sie nur diesen Versatz zu yCoordinate hinzufügen:

const yOffset = -10; 

window.scrollTo({
    top: yCoordinate + yOffset,
    behavior: 'smooth'
});
2
Arseniy-II

Ich weiß, dass diese Frage wirklich alt ist, aber ich habe eine einfache und einfache jQuery-Lösung in css-tricks gefunden. Das ist das, was 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;
      }
    }
  });
});
1
Horacio

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

0
Adam Pery

Dies ist ein Arbeitsskript, mit dem die Seite zum Anker gerollt wird ..__ Geben Sie dem Anker-Link eine ID, die dem Namensattribut des Ankers entspricht, zu dem Sie scrollen 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>
0
Rudy Lister

eine Vue2-Lösung ... Fügen Sie einfache Dateneigenschaften 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;
 }
0
Yordan Georgiev

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 "Blättern" zu allen Links hinzu, die Sie animieren möchten

0
Chuck Le Butt