Hey! Eğer JavaScript tabanlı pürüzsüz kaydırma tavşan deliğine çok ileri gitmeden önce, bunun için yerli CSS özelliği olduğunu biliyoruz: scroll-behavior.
html ( scroll-behavior: smooth; )Ve yardım etmek için jQuery gibi bir kitaplığa ulaşmadan önce, aşağıdaki gibi düzgün kaydırmanın yerel bir JavaScript sürümü de vardır:
// Scroll to specific values // scrollTo is the same window.scroll(( top: 2500, left: 0, behavior: 'smooth' )); // Scroll certain amounts from current position window.scrollBy(( top: 100, // could be negative value left: 0, behavior: 'smooth' )); // Scroll to a certain element document.querySelector('.hello').scrollIntoView(( behavior: 'smooth' ));Dustan Kasten'in bunun için bir polyfill'i var. Ve muhtemelen buna yalnızca sayfayı kaydırarak #target atlama bağlantıları ve CSS ile yapılamayan bir şey yapıyor olsaydınız ulaşırdınız.
Düzgün Kaydırmanın Erişilebilirliği
Sorunsuz kaydırma için hangi teknolojiyi kullanırsanız kullanın, erişilebilirlik bir endişe kaynağıdır. Örneğin, bir #hashbağlantıyı tıklarsanız, yerel davranış tarayıcının odağı bu kimlikle eşleşen öğeye değiştirmesidir. Sayfa kayabilir, ancak kaydırma, odak değişikliğinin bir yan etkisidir.
Varsayılan odak değiştirme davranışını (anında kaydırmayı önlemek ve düzgün kaydırmayı etkinleştirmek için yapmanız gereken) geçersiz kılarsanız , odak değiştirmeyi kendiniz halletmeniz gerekir .
Heather Migliorisi, Düzgün Kaydırma ve Erişilebilirlik'te kod çözümleriyle bunu yazdı.
JQuery ile Yumuşak Kaydırma
jQuery bunu da yapabilir. İşte aynı sayfadaki bir bağlantıya düzgün bir sayfa kaydırması gerçekleştirmek için kod. Bu atlama bağlantılarını tanımlamak için yerleşik bir mantık vardır ve diğer bağlantıları hedeflememektedir.
// Select all links with hashes $('a(href*="#")') // Remove links that don't actually link to anything .not('(href="#")') .not('(href="#0")') .click(function(event) ( // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) ( // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('(name=' + this.hash.slice(1) + ')'); // Does a scroll target exist? if (target.length) ( // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate(( scrollTop: target.offset().top ), 1000, function() ( // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) ( // Checking if the target was focused return false; ) else ( $target.attr('tabindex','-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again ); )); ) ) ));CodePen'de Chris Coyier (@chriscoyier) tarafından jQuery'de Kalem Düzgün Sayfa Kaydırma'ya bakın.
Bu kodu kullandıysanız ve hepiniz HEY WHAT THE BLUE OUTLINES?! Gibiyseniz, yukarıdaki erişilebilirlikle ilgili bilgileri okuyun.