Di chuyển mượt mà đến div id jQuery

Tôi đã cố gắng để có được một cuộn đến mã div jquery để hoạt động chính xác. Dựa trên một câu hỏi khác về stack stack, tôi đã thử như sau

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

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

Nhưng nó không hoạt động. Nó chỉ chộp lấy div. Tôi cũng đã thử

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

Không có tiến bộ.

Bạn cần phải làm động html, body

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

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

Nếu bạn muốn ghi đè điều hướng id chuẩn trên trang mà không thay đổi đánh dấu HTML để cuộn trơn tru , hãy sử dụng ( ví dụ ) này:

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

đây là 2 xu của tôi:

Javascript:

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

Html:

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

và mục tiêu:

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

Đây là những gì tôi sử dụng:

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

Cái hay của cái này là bạn có thể sử dụng vô số liên kết băm và id tương ứng mà không cần phải thực thi một tập lệnh mới cho mỗi tập lệnh.

Nếu bạn đang sử dụng WordPress, hãy chèn mã vào footer.phptệp chủ đề của bạn ngay trước thẻ đóng </body>.

Nếu bạn không có quyền truy cập vào các tệp chủ đề, bạn có thể nhúng mã ngay bên trong trình chỉnh sửa bài / trang (bạn phải chỉnh sửa bài ở chế độ Văn bản) hoặc trên tiện ích Văn bản sẽ tải lên trên tất cả các trang.

Nếu bạn đang sử dụng bất kỳ CMS nào khác hoặc chỉ HTML, bạn có thể chèn mã vào phần tải lên trên tất cả các trang ngay trước thẻ đóng </body>.

Nếu bạn cần thêm chi tiết về điều này, hãy xem bài viết nhanh của tôi ở đây: jQuery mượt mà di chuyển đến id

Hy vọng rằng sẽ giúp, và cho tôi biết nếu bạn có câu hỏi về nó.

một ví dụ nữa:

Liên kết 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);
  });

Neo HTML:

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

bạn có chắc là bạn đang tải tệp jQuery scrollTo Plugin không?

bạn có thể nhận được một đối tượng: phương thức không tìm thấy lỗi "scrollTo" trong bàn điều khiển.

phương thức scrollTO không phải là phương thức jquery riêng. để sử dụng nó, bạn cần bao gồm cuộn jquery Để tập tin plugin.

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

soln: thêm phần này vào phần đầu

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

Kịch bản này là một cải tiến của kịch bản từ Vector. Tôi đã thực hiện một chút thay đổi cho nó. Vì vậy, tập lệnh này hoạt động cho mọi liên kết với cuộn trang lớp trong đó.

Lúc đầu mà không nới lỏng:

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

Để nới lỏng, bạn sẽ cần Jquery UI:

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

Thêm phần này vào tập lệnh:

'easeOutExpo'

Sau cùng

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

Tất cả các nới lỏng bạn có thể tìm thấy ở đây: Cheat Sheet .

Mã này sẽ hữu ích cho bất kỳ liên kết nội bộ nào trên web

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

Bạn có thể làm điều đó bằng cách sử dụng mã jQuery đơn giản sau đây.

Hướng dẫn, Demo và mã nguồn có thể được tìm thấy từ đây - Di chuyển mượt mà đến div bằng 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>

Ở đây tôi đã thử điều này, công việc tuyệt vời cho tôi.

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

Điều này có thể được thực hiện trong JS đơn giản:

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

Hỗ trợ trình duyệt là một vấn đề nhỏ, nhưng các trình duyệt hiện đại hỗ trợ nó .

Đây là cách đơn giản nhất. Nguồn- https://www.w3schools.com/jsref/met_element_scrollintoview.asp

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

Điều này làm việc với tôi.

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

Cảm ơn.

Đây là giải pháp của tôi để cuộn trơn tru đến div / neo bằng jQuery trong trường hợp bạn có một tiêu đề cố định để nó không cuộn bên dưới nó. Ngoài ra nó hoạt động nếu bạn liên kết nó từ trang khác.

Chỉ cần thay thế ".site-header" thành div có chứa tiêu đề của bạn.

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