Tarayıcının, yalnızca JavaScript'i kullanarak sayfayı belirli bir bağlantıya kaydırmasını sağlamak istiyorum.

HTML kodumda bir nameveya idözellik belirttim :

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

veya

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

Şuraya giderek elde ettiğiniz efekti elde etmek istiyorum http://server.com/path#anchorName. Sayfa, tutturucu sayfanın görünür kısmının üstüne yakın olacak şekilde kaydırılmalıdır.

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

Hiçbir jQuery gerekli!

Çok daha basit:

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

JQuerys .animate () , .offset () ve öğelerini kullanabilirsiniz scrollTop. Sevmek

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

örnek bağlantı: http://jsbin.com/unasi3/edit

Eğer hareketlendirmek kullanımına istemiyorsanız .scrollTop () gibi

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

veya doğal location.hashgibi javascripts

location.hash = '#' + anchorid;

JAndy tarafından harika bir çözüm, ancak düzgün kaydırma firefox'ta çalışma sorunları yaşıyor gibi görünüyor.

Bu şekilde yazmak Firefox'ta da işe yarar.

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

2018-2020 Saf js:

Öğeye kaydırmanın çok uygun bir yolu var:

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

Ama anladığım kadarıyla, aşağıdaki seçenekler gibi iyi bir desteği yok.

Yöntem hakkında daha fazla bilgi edinin.

Elemanın üstte olması gerekiyorsa:

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

Codepen'de gösteri örneği

Elemanın merkezde olmasını istiyorsanız:

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

Codepen'de gösteri örneği

Destek:

scrollAynı yöntemle yazıyorlar scrollTo, ancak destek daha iyi gösteriyorscrollTo .

Yöntem hakkında daha fazla bilgi

JQuery olmadan saf bir javascript çözümü. Chrome ve Ie'de test edildi, IOS'ta test edilmedi

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/

2018'de böyle basit bir şey için jQuery'ye ihtiyacınız yok. Yerleşik scrollIntoView()yöntem behavior, sayfadaki herhangi bir öğeye düzgün bir şekilde kaydırmak için " " özelliğini destekler . Yer işareti koymak için tarayıcı URL'sini bir karma ile bile güncelleyebilirsiniz.

Gönderen HTML imleri kaydırma bu öğretici , burada otomatik olarak sayfadaki tüm çapa bağlantıları düzgün kaydırma eklemek için bir yerli yoludur:

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

Düzgün bir şekilde doğru konuma gelin (2019)

Doğru y koordinatı alın ve kullanınwindow.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'});

Ofset ile

scrollIntoViewiyi bir seçenektir, ancak bazı durumlarda mükemmel çalışmayabilir. Örneğin ek ofsete ihtiyacınız olduğunda . İle scrollTosenin sadece bu gibi offset eklemek gerekir:

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

CSS-Tricks'in çözümü artık jQuery 2.2.0'da çalışmıyor. Bir seçici hatası atar:

JavaScript çalışma zamanı hatası: Sözdizimi hatası, tanınmayan ifade: a [href * = #]: değil ([href = #])

Seçiciyi değiştirerek düzelttim. Tam snippet şudur:

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

Çoğu cevap gereksiz yere karmaşıktır.

Yalnızca hedef öğeye atlamak istiyorsanız JavaScript'e ihtiyacınız yoktur:

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

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

Hedefe animasyonlu olarak ilerlemek istiyorsanız , lütfen @ Shahil'in cevabına bakın.

Bu çalışıyor:

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

  e.preventDefault();

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

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

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

  }, 2000);

});

https://jsfiddle.net/68pnkfgd/

Animasyon eklemek istediğiniz bağlantılara "kaydırma" sınıfını eklemeniz yeterlidir

Bu, sayfayı bağlantıya kaydırmak için çalışan bir komut dosyasıdır. Kurulumu yapmak için bağlantı bağlantısına, kaydırmak istediğiniz bağlantı noktasının ad özniteliğiyle eşleşen bir kimlik verin.

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

Sorunun gerçekten eski olduğunu biliyorum, ama css-tricks'te kolay ve basit bir jQuery çözümü buldum . Şu an kullandığım bu.

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

bir vue2 çözümü ... güncellemeyi zorlamak için basit veri özelliği ekleyin

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

tarayıcının sayfayı belirli bir bağlantıya kaydırmasını sağlamanın en kolay yolu style.css * {scroll-behavior: smooth;} ve html navigasyonunuzda #NameOfTheSection kullanın

*{scroll-behavior: smooth;}

<a href="#scroll-to">Home<a/>

<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>
<p>other sections</p>

<section id="scroll-to">
<p>it will scroll down to this section</p>
</section>