Div id jQuery'ye yumuşak kaydırma

Düzgün çalışması için div id jquery kodu bir kaydırma almaya çalışıyorum. Başka bir yığın taşma sorusuna dayanarak aşağıdakileri denedim

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

Ama işe yaramadı. Sadece div'a yapışır. Ben de denedim

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

İlerleme yok.

Canlandırmanız gerekiyor html, body

DEMO http://jsfiddle.net/kevinPHPkevin/8tLdq/1/

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

Düzgün kaydırma için HTML işaretlemesini değiştirmeden sayfadaki standart href-id gezinmesini geçersiz kılmak istiyorsanız , bunu kullanın ( örnek ):

// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos});
});

İşte benim 2 sent:

JavaScript:

$('.scroll').click(function() {
    $('body').animate({
        scrollTop: eval($('#' + $(this).attr('target')).offset().top - 70)
    }, 1000);
});

Html:

<a class="scroll" target="contact">Contact</a>

ve hedef:

<h2 id="contact">Contact</h2>

İşte ne kullanıyorum:

<!-- jquery smooth scroll to id's -->   
<script>
$(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
        }, 500);
        return false;
      }
    }
  });
});
</script>

Bunun güzelliği, her biri için yeni bir komut dosyası yürütmek zorunda kalmadan sınırsız sayıda karma bağlantı ve karşılık gelen kimlik kullanabilmenizdir.

WordPress kullanıyorsanız footer.php, kapatma teması etiketinden hemen önce kodu temanızın dosyasına ekleyin </body>.

Tema dosyalarına erişiminiz yoksa, kodu doğrudan yazı / sayfa düzenleyicisine (yayını Metin modunda düzenlemelisiniz) veya tüm sayfalara yüklenecek bir Metin widget'ına gömebilirsiniz.

Başka bir CMS veya yalnızca HTML kullanıyorsanız, kodu, kapanış gövdesi etiketinden hemen önce tüm sayfalara yüklenen bir bölüme ekleyebilirsiniz </body> .

Bununla ilgili daha fazla ayrıntıya ihtiyacınız varsa, hızlı yazımı buradan kontrol edin: jQuery pürüzsüz kaydırma

Umarım bu yardımcı olur ve bu konuda sorularınız varsa bana bildirin.

bir örnek daha:

HTML bağlantısı:

<a href="#featured" class="scrollTo">Learn More</a>

JS:

  $(".scrollTo").on('click', function(e) {
     e.preventDefault();
     var target = $(this).attr('href');
     $('html, body').animate({
       scrollTop: ($(target).offset().top)
     }, 2000);
  });

HTML bağlantısı:

  <div id="featured">My content here</div>

jQuery scrollTo Plugin dosyasını yüklediğinizden emin misiniz?

konsolda bir nesne: yöntem bulunamadı "scrollTo" hatası alıyor olabilirsiniz.

scrollTO yöntemi yerel bir jquery yöntemi değildir. Bunu kullanmak için jquery scroll To plugin dosyasını eklemeniz gerekir.

ref: http://flesler.blogspot.in/2009/05/jqueryscrollto-142-released.html http://flesler.blogspot.in/2007/10/jqueryscrollto.html

soln: bunu baş bölümüne ekleyin.

<script src="\\path\to\the\jquery.scrollTo.js file"></script>

Bu komut dosyası, Vector komut dosyasının geliştirilmesidir. Bunda küçük bir değişiklik yaptım. Bu komut dosyası, sınıf sayfa kaydırmalı her bağlantı için çalışır.

İlk başta hafifletmeden:

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000);
});

Hareket hızı için Jquery kullanıcı arayüzüne ihtiyacınız olacak:

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

Bunu betiğe ekleyin:

'easeOutExpo'

final

$("a.page-scroll").click(function() {
    var targetDiv = $(this).attr('href');
    $('html, body').animate({
        scrollTop: $(targetDiv).offset().top
    }, 1000, 'easeOutExpo');
});

Burada bulabileceğiniz tüm kolaylıklar: Cheat Sheet .

Bu kod, web'deki herhangi bir dahili bağlantı için yararlı olacaktır

    $("[href^='#']").click(function() {
        id=$(this).attr("href")
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 2000);
    });

Bu düz JS'de yapılabilir:

document
    .getElementById("range-calculator")
    .scrollIntoView({ behavior: "smooth" });

Tarayıcı desteği biraz sorun, ancak modern tarayıcılar bunu destekliyor .

Bunu aşağıdaki basit jQuery kodunu kullanarak yapabilirsiniz.

Öğretici, Demo ve Kaynak kodu buradan bulunabilir - jQuery kullanarak div'a yumuşak kaydırma

JavaScript:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.substr(1) +']');
        if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top
            }, 1000);
            return false;
        }
    });
});

HTML:

<a href="#section1">Go Section 1</a>
<div id="section1">
    <!-- Content goes here -->
</div>

İşte bunu denedim, bu benim için harika.

$('a[href*="#"]').on('click', function (e) {
    e.preventDefault();

    $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 500, 'linear');
});

HTML:

 <a href="#fast-food" class="active" data-toggle="tab" >FAST FOOD</a>

<div id="fast-food">
<p> Scroll Here... </p>
  </div>

Bu en basit kaynaktır. Https://www.w3schools.com/jsref/met_element_scrollintoview.asp

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

Bu benim için çalışıyor.

<div id="demo">
        <h2>Demo</h2>
</div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $(document).ready(function () {
        // Handler for .ready() called.
        $('html, body').animate({
            scrollTop: $('#demo').offset().top
        }, 'slow');
    });
</script>

Teşekkürler.

Aşağıda, sabit bir üstbilginizin altında olması durumunda jQuery kullanarak div / anchor'a kaydırmayı düzgün bir şekilde düzeltmek için benim çözümüm var. Ayrıca başka bir sayfadan bağlarsanız da çalışır.

Başlığınızı içeren div olarak ".site-header" ifadesini değiştirmeniz yeterlidir.

$(function() {

$('a[href*="#"]:not([href="#"])').click(function() {
var headerheight = $(".site-header").outerHeight();
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 - headerheight)
    }, 1000);
    return false;
  }
}
});

//Executed on page load with URL containing an anchor tag.
if($(location.href.split("#")[1])) {
var headerheight = $(".site-header").outerHeight();
  var target = $('#'+location.href.split("#")[1]);
  if (target.length) {
    $('html,body').animate({
      scrollTop: target.offset().top - headerheight
    }, 1);
    return false;
  }
}
});