Lisäsit sivulle ankkurin, laitoit URL-osoitteeseen #section ja odotat siistiä pehmeää vieritystä. Käyttäjä klikkaa toiselta sivulta, selain noudattaa tunnollisesti hashia... ja nykäisee äkillisesti kohteeseen. Ei vieritystä. Vain välitön hyppäys.

Ongelma on siinä, että selaimet käsittelevät hashin oletuksena välittömästi, ennen kuin DOM on täysin valmis ja skriptit ehtivät napata tapahtuman. Kun käyttäjä saapuu ulkoisen linkin kautta, click-käsittelijäsi ei laukea lainkaan: klikkaustapahtumaa ei ollut, vain suora URL-navigointi.

Olemme koonneet kaksi taistelutestattua jQuery-ratkaisua: perusskriptin yksinkertaisiin tapauksiin ja edistyneen version, jossa on klikkaustenkäsittely, sivulataus-tuki ja konfliktien välttäminen. Molemmat on testattu oikeissa projekteissa ja toimivat nykyisillä jQuery-versioilla.

💡 Pika-yleiskatsaus:

• Tallenna hash URL-osoitteesta väliaikaiseen muuttujaan
• Tyhjennä location.hash, jotta selain ei hypi äkillisesti
• Vieritä ankkuriin animate()-metodilla halutulla siirtymällä
• Palauta hash, jotta osoitepalkissa on oikea URL

Miksi pehmeä ankkurivieritys on tärkeää

Kun kävijä seuraa linkkiä kuten site.com/page/#pricing, hän odottaa näkevänsä hinnoittelulohkon, ei sivun yläosaa. Äkillinen hyppäys on hämmentävä: käyttäjä ei ymmärrä, mihin hän päätyi tai mitä oli ennen. Pehmeä vieritys antaa kontekstin: silmät havaitsevat välissä olevat osiot, ja aivot kartoittavat reitin lähtöpisteestä määränpäähän.

Natiivilla CSS-ominaisuudella scroll-behavior: smooth asia on yksinkertainen: lisää se tyylitiedostoosi, ja selain vierittää ankkuriin automaattisesti. Mutta tämä lähestymistapa hajoaa heti, kun tarvitset mukautetun siirtymän kiinteälle ylätunnisteelle. 110 pikselin siirtymä estää lohkoa liukumasta header-elementin alle ja sijoittaa sen juuri sinne, minne käyttäjä odottaa. jQuery-ratkaisu antaa sinulle tämän hallinnan.

Lisäksi on selainyhteensopivuus. scroll-behavior: smooth ei toimi Internet Explorerissa (kyllä, tällaisia projekteja on yhä), kun taas jQueryn animate()-metodi käyttäytyy identtisesti kaikkialla.

Perusskripti: minimaalinen koodi, maksimaalinen hyöty

Ensimmäinen vaihtoehto on kompakti, vain 10 riviä. Se ratkaisee täsmälleen yhden ongelman: pehmeän vierityksen ankkuriin, kun käyttäjä saapuu toiselta sivulta tai suoran linkin kautta, jossa on hash.

1
jQuery(document).ready(function ($) {
2
  var myHash = location.hash; // save the hash
3
  location.hash = '';          // clear it — browser stops jerking
4
  if (myHash[1] != undefined) { // hash not empty?
5
    $('html, body').animate(
6
      { scrollTop: $(myHash).offset().top - 110 },
7
      700 // duration in milliseconds
8
    );
9
    location.hash = myHash; // restore the hash
10
  }
11
});

Vaiheittainen erittely, koska kolme riviä tekee taikoja, mutta mekaniikan ymmärtäminen on tärkeää:

• var myHash = location.hash: lue hash osoitepalkista (esimerkiksi #pricing). Tässä vaiheessa selain ei ole vielä vierittänyt.
• location.hash = '': avaintemppu. Hashin tyhjentäminen saa selaimen kadottamaan kohteensa välitöntä hyppäystä varten. Ilman tätä riviä skripti "taistelisi" selaimen sisäänrakennettua toimintaa vastaan ja häviäisi.
• $(myHash).offset().top - 110: laske ankkurin sijainti dokumentin yläreunasta ja vähennä 110 pikseliä. Tämä on siirtymäsi kiinteälle ylätunnisteelle. Jos ylätunnisteesi on position: fixed ja 80px korkea, käytä 80 (tai 90 hieman hengitystilaa varten). Jos ylätunnistetta ei ole, poista vähennys kokonaan.
• $('html, body').animate(...): vieritä pehmeästi 700 millisekunnin aikana. 'html, body' -valitsin ei ole oikku: eri selaimet vierittävät joko html- tai body-elementtiä, joten määritämme molemmat luotettavuuden vuoksi.
• location.hash = myHash: palauta hash. Nyt osoitepalkki näyttää taas #pricing, ja sivu on jo pysäköity nätisti kohdelohkon kohdalle.

Lisää skripti teemasi functions.php-tiedostoon, mukautettuun JS-tiedostoon tai lisäosan, kuten Code Snippets, kautta. Keskeinen vaatimus on, että sen on oltava jQuery(document).ready()-lohkon sisällä.

Edistynyt versio: klikkaustenkäsittely, sivulataus ja konfliktisuojaus

Perusskripti kattaa useimmat skenaariot, mutta joskus location.hash = '' ei ehdi toimia ajoissa: selain hyppää ennen kuin hash tyhjennetään. Näissä tapauksissa käytä toista versiota. Se on raskaampi mutta luotettavampi.

1
jQuery(document).ready(function () {
2
  jQuery(window).bind('load', function () {
3
    jQuery('a:not(.spu-clickable)[href*="#"]:not([href="#"])').click(function () {
4
      if (
5
        location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') ||
6
        location.hostname == this.hostname
7
      ) {
8
        var target = jQuery(this.hash);
9
        target = target.length ? target : jQuery('[name=' + this.hash.slice(1) + ']');
10
        if (target.length) {
11
          jQuery('html, body').animate(
12
            { scrollTop: target.offset().top - 37 },
13
            1000
14
          );
15
          return false;
16
        }
17
      }
18
    });
19
  });
20
});
21
 
22
jQuery(window).load(function () {
23
  function goToByScroll(id) {
24
    jQuery('html, body').animate(
25
      { scrollTop: jQuery('#' + id).offset().top - 38 },
26
      1000
27
    );
28
  }
29
  if (window.location.hash != '') {
30
    goToByScroll(window.location.hash.substr(1));
31
  }
32
});

Tässä on mitä tapahtuu, lohko kerrallaan:

Lohko yksi: klikkauskäsittelijä sisäisille ankkurilinkeille. jQuery(window).bind('load', ...) varmistaa, että kaikki sivuelementit (mukaan lukien kuvat ja iframe-kehykset) on ladattu ennen käsittelijän sitomista. Suodatin a:not(.spu-clickable) sulkee pois linkit, joita popup-lisäosa (SPU, WordPress PopUp) jo käsittelee, estäen animaatiokonfliktit. Lisää omat poissulkuluokkasi samaa kaavaa noudattaen.

Lohko kaksi: navigoinnin käsittely ulkoiselta sivulta. jQuery(window).load() laukeaa myöhemmin kuin document.ready ja takaa, että kaikki elementit, mukaan lukien ankkuri, ovat DOMissa. goToByScroll(id)-funktio tekee täsmälleen saman kuin perusskripti, mutta sitä kutsutaan vasta, kun ikkuna on täysin latautunut. substr(1) poistaa #-merkin hashista.

Tärkeä huomio: jQuery(window).load() on ollut vanhentunut jQuery 3.0 -versiosta lähtien. Jos projektisi käyttää nykyistä jQuery-versiota, korvaa se seuraavalla:

1
jQuery(window).on('load', function () {
2
  // code here
3
});

Syntaksi eroaa, mutta toiminta on identtinen.

Hienosäätö: siirtymät, valitsimet ja sudenkuopat

Skripti toimii, mutta jokainen asettelu on ainutlaatuinen. Tässä on kolme yleistä säätöä, jotka pelastivat oikeita projekteja.

Ongelma yksi: offset().top palauttaa vääriä koordinaatteja. Näin tapahtuu, kun ylätason elementeillä on CSS-ominaisuudet transform, filter tai will-change, jotka luovat uuden paikannuskontekstin. offset() laskee tällöin suhteessa tähän kontekstiin dokumentin sijaan. Ratkaisu: käytä offset({top: -0}):

1
jQuery('html, body').animate(
2
  { scrollTop: jQuery('#' + id).offset({ top: -0 }).top },
3
  1000
4
);

Parametri {top: -0} pakottaa jQueryn laskemaan sijainnin uudelleen dokumentin rajoista, välittämättä välikonteksteista. Se näyttää taialta, mutta toimii.

Ongelma kaksi: valitsin 'html, body' vierittää väärää elementtiä. Joissakin teemoissa vierityssäiliö ei ole html tai body vaan tietty lohko, esimerkiksi body.home kotisivulle tai .main-content sisäsivuille. Tunnista säiliösi DevTools-työkaluilla (Elements-välilehti → etsi overflow: scroll tai overflow: auto) ja korvaa se valitsimessa:

1
jQuery('body.home').animate(
2
  { scrollTop: target.offset().top - 37 },
3
  1000
4
);

Ongelma kolme: hash sisältää kyrillisiä tai erikoismerkkejä. location.hash palauttaa URL-enkoodatun sekvenssin luettavan merkkijonon sijaan, eikä jQuery-valitsin $(myHash) löydä elementtiä. Ratkaisu: dekoodaa hash decodeURIComponent()-funktiolla ennen sen käyttämistä valitsimessa.

Video: live-esimerkki vierityksestä ulkoisesta linkistä

Lyhyt demo John Smithiltä: pehmeä ankkurivieritys jQueryn animate()-metodilla oikealla sivulla, jossa on kiinteä ylätunniste ja ulkoinen navigointi.

⁉️🤔 Usein kysytyt kysymykset

Skripti toimii samalla sivulla, mutta ei navigoitaessa toisesta URL-osoitteesta. Miksi?

Koska click-käsittelijä ei koskaan laukea: klikkausta ei tapahtunut. Käyttäjä seurasi suoraa linkkiä, ja selain käsitteli hashin ennen kuin JS:si ehti ajaa. Korjaus on sekvenssi location.hash = '' + animate() + location.hash = myHash. Hashin tyhjentäminen peruuttaa sisäänrakennetun hypyn, animaatio vierittää pehmeästi, ja hashin palauttaminen säilyttää oikean URL-osoitteen osoitepalkissa.

Mitä siirtymää minun pitäisi käyttää kiinteälle ylätunnisteelle?

Tarkka ylätunnisteen korkeus plus muutama pikseli hengitystilaa. Avaa DevTools (F12), valitse sivustosi header-elementti ja tarkista sen height Computed-välilehdeltä. Jos ylätunniste on esimerkiksi 80px, käytä koodissasi 90. Jos mobiiliversiossa on eri ylätunnisteen korkeus, lisää media query dynaamisella siirtymälaskennalla.

Onko jQuery yhä relevantti vuonna 2026?

Kyllä, erityisesti WordPress-ekosysteemissä. jQuery on yhä WP:n ytimessä, monet lisäosat ja teemat riippuvat siitä, ja koko ekosysteemin migrointi natiiviin JS:ään vie vuosia. Uusissa projekteissa puhtaalla JavaScriptillä pehmeä vieritys tehdään element.scrollIntoView({ behavior: 'smooth' })-metodilla tai scroll-behavior: smooth-määrityksellä CSS:ssä, huomattavasti vähemmillä koodiriveillä. Mutta jos muokkaat olemassa olevaa WP-sivustoa, jQuery-ratkaisu on yhä luotettava ja asianmukainen.

Voinko välttää jQueryn kokonaan?

Voit ja sinun pitäisi, jos projekti on uusi. Perusskriptin natiivi vastine:

1
document.addEventListener('DOMContentLoaded', () => {
2
  const hash = window.location.hash;
3
  if (hash) {
4
    window.location.hash = '';
5
    const target = document.querySelector(hash);
6
    if (target) {
7
      window.scrollTo({
8
        top: target.getBoundingClientRect().top + window.pageYOffset - 110,
9
        behavior: 'smooth'
10
      });
11
    }
12
    window.location.hash = hash;
13
  }
14
});

Sama periaate: tallenna hash, tyhjennä se, vieritä, palauta se. Ero on siinä, että behavior: 'smooth' käyttää selaimen natiivia CSS-moottoria jQueryn ajastimen sijaan. Et voi määrittää nopeutta, mutta koodi on 30 kt kevyempi (jQueryn paino).

Miksi $('html, body') eikä vain $('html')?

Firefox vierittää html-elementtiä, Chrome käyttää body-elementtiä, ja Safari riippuu versiosta. Molempien valitsimien määrittäminen animate()-metodissa takaa, että se toimii kaikissa selaimissa: jQuery lähettää animaation sille elementille, joka sitä tosiasiallisesti soveltaa.

Kannattaako jQueryä käyttää vain pehmeään vieritykseen vuonna 2026

Jos sinulla on WordPress-sivusto tai legacy-projekti, jossa jQuery on jo ladattu, nappaa skripti tästä artikkelista äläkä monimutkaista asioita. Kymmenen riviä koodia, joka toimii kaikkialla, missä tahansa selaimessa, ilman polyfill-tiedostoja. Uusiin projekteihin puhtaalla JavaScriptillä käytä natiivia scroll-behavior: smooth-määritystä tai scrollIntoView()-metodia. Molemmat lähestymistavat tuottavat pehmeän vierityksen, mutta jQuery-metodi antaa sinulle hallinnan nopeuteen, siirtymään ja vierityssäiliön valitsimeen. Natiivit toteutukset vaativat erillisiä tarkistuksia saman saavuttamiseksi.

Pääsääntö, jonka olemme oppineet kymmenistä projekteista: tyhjennä aina hash ennen vieritystä. Ilman tätä temppua mikään käsittelijä ei päihitä selaimen sisäänrakennettua toimintaa, ja käyttäjät kokevat jatkossakin äkillisiä hyppäyksiä.