Buat pautan dalaman tatal dengan lancar dengan javascript

Pendekatan ini mengikuti prinsip -prinsip DHTML yang tidak mengganggu, menjadikannya mudah bagi semua orang untuk digunakan. Untuk penyelesaian untuk berfungsi, skrip perlu dijalankan oleh sesuatu; Kami meletakkan kod dari langkah pertama kami (gelung di atas pautan untuk mencari mereka yang dalaman) ke dalam fungsi ss_fixAllLinks (), dan mengikatnya ke acara Onload Window menggunakan fungsi Scott Andrew:

ss_addEvent(window,"load",ss_fixAllLinks);

keseluruhan kod kelihatan seperti ini:

function ss_fixAllLinks() {   

  // Get a list of all links in the page   

  var allLinks = document.getElementsByTagName('a');   

  // Walk through the list   

  for (var i=0;i
    var lnk = allLinks[i];   

    if ((lnk.href && lnk.href.indexOf('#') != -1) &&    

        ( (lnk.pathname == location.pathname) ||   

    ('/'+lnk.pathname == location.pathname) ) &&    

        (lnk.search == location.search)) {   

      // If the link is internal to the page (begins in #)   

      // then attach the smoothScroll function as an onclick   

      // event handler   

      ss_addEvent(lnk,'click',smoothScroll);   

    }   

  }   

}   

   

function smoothScroll(e) {   

  // This is an event handler; get the clicked on element,   

  // in a cross-browser fashion   

  if (window.event) {   

    target = window.event.srcElement;   

  } else if (e) {   

    target = e.target;   

  } else return;   

     

  // Make sure that the target is an element, not a text node   

  // within an element   

  if (target.nodeType == 3) {   

    target = target.parentNode;   

  }   

     

  // Paranoia; check this is an A tag   

  if (target.nodeName.toLowerCase() != 'a') return;   

     

  // Find the  tag corresponding to this href   

  // First strip off the hash (first character)   

  anchor = target.hash.substr(1);   

  // Now loop all A tags until we find one with that name   

  var allLinks = document.getElementsByTagName('a');   

  var destinationLink = null;   

  for (var i=0;i
    var lnk = allLinks[i];   

    if (lnk.name && (lnk.name == anchor)) {   

      destinationLink = lnk;   

      break;   

    }   

  }   

     

  // If we didn't find a destination, give up and let the browser do   

  // its thing   

  if (!destinationLink) return true;   

     

  // Find the destination's position   

  var destx = destinationLink.offsetLeft;    

  var desty = destinationLink.offsetTop;   

  var thisNode = destinationLink;   

  while (thisNode.offsetParent &&    

        (thisNode.offsetParent != document.body)) {   

    thisNode = thisNode.offsetParent;   

    destx += thisNode.offsetLeft;   

    desty += thisNode.offsetTop;   

  }   

     

  // Stop any current scrolling   

  clearInterval(ss_INTERVAL);   

     

  cypos = ss_getCurrentYPos();   

     

  ss_stepsize = parseInt((desty-cypos)/ss_STEPS);   

  ss_INTERVAL = setInterval('ss_scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);   

     

  // And stop the actual click happening   

  if (window.event) {   

    window.event.cancelBubble = true;   

    window.event.returnValue = false;   

  }   

  if (e && e.preventDefault && e.stopPropagation) {   

    e.preventDefault();   

    e.stopPropagation();   

  }   

}   

   

function ss_scrollWindow(scramount,dest,anchor) {   

  wascypos = ss_getCurrentYPos();   

  isAbove = (wascypos < dest);   

  window.scrollTo(0,wascypos + scramount);   

  iscypos = ss_getCurrentYPos();   

  isAboveNow = (iscypos < dest);   

  if ((isAbove != isAboveNow) || (wascypos == iscypos)) {   

    // if we've just scrolled past the destination, or   

    // we haven't moved from the last scroll (i.e., we're at the   

    // bottom of the page) then scroll exactly to the link   

    window.scrollTo(0,dest);   

    // cancel the repeating timer   

    clearInterval(ss_INTERVAL);   

    // and jump to the link directly so the URL's right   

    location.hash = anchor;   

  }   

}   

   

function ss_getCurrentYPos() {   

  if (document.body && document.body.scrollTop)   

    return document.body.scrollTop;   

  if (document.documentElement && document.documentElement.scrollTop)   

    return document.documentElement.scrollTop;   

  if (window.pageYOffset)   

    return window.pageYOffset;   

  return 0;   

}   

   

function ss_addEvent(elm, evType, fn, useCapture)   

// addEvent and removeEvent   

// cross-browser event handling for IE5+,  NS6 and Mozilla   

// By Scott Andrew   

{   

  if (elm.addEventListener){   

    elm.addEventListener(evType, fn, useCapture);   

    return true;   

  } else if (elm.attachEvent){   

    var r = elm.attachEvent("on"+evType, fn);   

    return r;   

  }   

}    

   

var ss_INTERVAL;   

var ss_STEPS = 25;   

   

ss_addEvent(window,"load",ss_fixAllLinks);

membungkus

Pautan dalaman dokumen anda akan menatal ke destinasi mereka, yang membolehkan pengguna anda mengekalkan kesedaran di mana penyemak imbas terletak di dalam dokumen, dan sejauh mana mereka dari titik permulaan mereka. Kod ini telah diuji dan berfungsi di Mozilla, iaitu, dan opera; Ia tidak berfungsi di Konqueror, dan dianggap tidak berfungsi dalam pelayar lain.

Soalan Lazim (Soalan Lazim) Mengenai Menatal Lancar dengan JavaScript

bagaimana saya boleh melaksanakan skrol lancar dalam javascript?

Melaksanakan Smooth Scrolling dalam JavaScript melibatkan menggunakan kaedah window.scrollto. Kaedah ini mengambil dua hujah: koordinat X dan koordinat Y yang mana tetingkap harus menatal. Untuk membuat skrol licin, anda boleh menggunakan harta tingkah laku dan menetapkannya untuk 'lancar'. Berikut adalah contoh mudah:

window.scrollto ({ atas: 0,
tingkah laku: 'smooth'
}); elemen khusus pada halaman. Anda boleh melakukan ini dengan terlebih dahulu memilih elemen menggunakan kaedah seperti document.queryselector, dan kemudian menggunakan kaedah scrollintoview pada elemen yang dipilih. Berikut adalah contoh:

var elemen = document.QuerySelector ('#myelement');

element.scrollIndoView ({behavior: 'smooth'}); Ciri dalam JavaScript disokong oleh pelayar yang paling moden, termasuk Chrome, Firefox, Safari, dan Edge. Walau bagaimanapun, ia tidak disokong oleh Internet Explorer. Anda boleh menyemak jadual keserasian pada dokumen web MDN untuk maklumat yang paling terkini. Walau bagaimanapun, anda boleh membuat fungsi skrol lancar tersuai dengan kelajuan set dengan menggunakan window.requestanimationframe method.

Bagaimana saya boleh melaksanakan Smooth Scrolling dengan JavaScript untuk pautan utama? Dalam pengendali acara, anda boleh menghalang tindakan lalai pautan, iaitu dengan serta -merta menavigasi ke elemen sasaran, dan sebaliknya gunakan kaedah ScrollIntoview untuk lancar menatal ke elemen sasaran. Berikut adalah contoh:

document.QuerySelectorAll ('a [href^= "#"]). Foreach (anchor => { anchor.addeventListener (' klik ', fungsi (e) {
e.PreVentDefault (); document.queryselector (this.getAttribute ('href')). scrollIntoview ({ behavior: 'smooth'
}); JavaScript?

Ya, anda boleh menambah tatal offset apabila menggunakan skrol lancar dengan JavaScript. Anda boleh melakukan ini dengan menolak mengimbangi yang dikehendaki dari koordinat Y dalam kaedah scrollto atau harta teratas dalam kaedah scrollintoview. JQuery menyediakan kaedah animasi, yang boleh anda gunakan untuk menghidupkan sifat scrolltop dari elemen HTML dan badan. Berikut adalah contoh:

$ ('html, badan'). Animate ({
scrollTop: $ ("#myelement"). Offset (). daripada JavaScript?

Ya, anda boleh melaksanakan tatal lancar dengan CSS dengan menggunakan harta tingkah laku tatal. Anda boleh menetapkan harta ini untuk 'licin' pada elemen HTML atau badan untuk membolehkan skrol lancar untuk keseluruhan halaman. Walau bagaimanapun, kaedah ini mempunyai sokongan penyemak imbas yang kurang daripada kaedah JavaScript. Jika menatal adalah lancar dan tidak segera, maka ia berfungsi dengan betul. Anda juga boleh menggunakan alat pemaju dalam penyemak imbas anda untuk memeriksa tingkah laku tatal. Ini akan membuat seketika menatal dan bukannya licin.

Atas ialah kandungan terperinci Buat pautan dalaman tatal dengan lancar dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!