Gulir halus ke id id jQuery

Saya sudah mencoba untuk mendapatkan scroll ke kode div jquery agar berfungsi dengan benar. Berdasarkan pertanyaan stack overflow saya mencoba yang berikut ini

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

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

Tapi itu tidak berhasil. Itu hanya terkunci ke div. Saya juga mencoba

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

Tanpa kemajuan.

Anda perlu menghidupkannya html, body

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

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

Jika Anda ingin mengganti navigasi href-id standar pada halaman tanpa mengubah markup HTML untuk pengguliran yang lancar , gunakan ini ( contoh ):

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

di sini adalah 2 sen saya:

Javascript:

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

Html:

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

dan targetnya:

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

Inilah yang saya gunakan:

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

Keindahan dari yang satu ini adalah Anda dapat menggunakan jumlah hash-link dan id yang sesuai tanpa harus mengeksekusi skrip baru untuk masing-masing.

Jika Anda menggunakan WordPress, masukkan kode ke footer.phpfile tema Anda tepat sebelum tag penutup </body>.

Jika Anda tidak memiliki akses ke file tema, Anda dapat menyematkan kode tepat di dalam editor posting / halaman (Anda harus mengedit posting dalam mode Teks) atau pada widget Teks yang akan memuat pada semua halaman.

Jika Anda menggunakan CMS lain atau hanya HTML, Anda dapat memasukkan kode di bagian yang dimuat di semua halaman tepat sebelum tag penutup tubuh </body>.

Jika Anda membutuhkan detail lebih lanjut tentang ini, lihat posting cepat saya di sini: jQuery smooth scroll to id

Semoga itu bisa membantu, dan beri tahu saya jika Anda memiliki pertanyaan tentangnya.

satu contoh lagi:

Tautan HTML:

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

Jangkar HTML:

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

Anda yakin sedang memuat file Plugin jQuery scrollTo?

Anda mungkin mendapatkan objek: metode tidak ditemukan kesalahan "scrollTo" di konsol.

metode scrollTO bukan metode jquery asli. untuk menggunakannya Anda harus memasukkan file jquery scroll To plugin.

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

soln: tambahkan ini di bagian kepala.

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

Skrip ini merupakan penyempurnaan skrip dari Vector. Saya telah membuat sedikit perubahan untuk itu. Jadi skrip ini berfungsi untuk setiap tautan dengan gulir halaman kelas di dalamnya.

Pada awalnya tanpa pelonggaran:

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

Untuk memudahkan Anda, Anda perlu Jquery UI:

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

Tambahkan ini ke skrip:

'easeOutExpo'

Terakhir

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

Semua kenikmatan yang dapat Anda temukan di sini: Cheat Sheet .

Kode ini akan berguna untuk semua tautan internal di web

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

Anda dapat melakukannya dengan menggunakan kode jQuery sederhana berikut.

Tutorial, Demo, dan kode Sumber dapat ditemukan dari sini - Gulir halus ke div menggunakan jQuery

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>

Di sini saya mencoba ini, itu sangat bagus untuk saya.

$('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>

Ini dapat dilakukan dalam JS sederhana:

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

Dukungan browser adalah masalah kecil, tetapi browser modern mendukungnya .

Ini adalah yang paling sederhana. Sumber- https://www.w3schools.com/jsref/met_element_scrollintoview.asp

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

Ini berhasil bagi saya.

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

Terima kasih.

Berikut adalah solusi saya untuk memuluskan scroll ke div / anchor menggunakan jQuery jika Anda memiliki header yang tetap sehingga tidak menggulir di bawahnya. Juga berfungsi jika Anda menautkannya dari halaman lain.

Cukup ganti ".site-header" ke div yang berisi tajuk Anda.

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