เลื่อนไปอย่างราบรื่นเพื่อ div id jQuery

ฉันพยายามเลื่อนดูรหัส jQuery id เพื่อให้ทำงานได้อย่างถูกต้อง จากคำถามล้นสแต็คอื่นฉันลองทำตามนี้

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

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

แต่มันไม่ทำงาน มันเพียงแค่ยึดกับ div ฉันก็ลอง

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

ไม่มีความคืบหน้า

คุณจำเป็นต้องเคลื่อนไหว html, body

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

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

หากคุณต้องการแทนที่การนำทาง href-idมาตรฐานบนหน้าโดยไม่เปลี่ยนมาร์กอัพ HTML เพื่อการเลื่อนที่ราบรื่นให้ใช้สิ่งนี้ ( ตัวอย่าง ):

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

นี่คือ 2 เซ็นต์ของฉัน:

javascript:

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

Html:

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

และเป้าหมาย:

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

นี่คือสิ่งที่ฉันใช้:

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

ความงามของกล้องนี้คือคุณสามารถใช้แฮชลิงค์และรหัสที่เกี่ยวข้องได้อย่างไม่ จำกัด โดยไม่ต้องเรียกใช้สคริปต์ใหม่สำหรับแต่ละไฟล์

หากคุณกำลังใช้ WordPress ใส่รหัสในรูปแบบของคุณของไฟล์ขวาก่อนแท็กร่างกายปิดfooter.php</body>

หากคุณไม่สามารถเข้าถึงไฟล์ชุดรูปแบบคุณสามารถฝังโค้ดในตัวแก้ไขโพสต์ / หน้า (คุณต้องแก้ไขโพสต์ในโหมดข้อความ) หรือในวิดเจ็ตข้อความที่จะโหลดขึ้นในทุกหน้า

หากคุณกำลังใช้ CMS อื่น ๆ หรือเพียงแค่ HTML </body>คุณสามารถแทรกโค้ดในส่วนที่โหลดขึ้นในทุกหน้าขวาก่อนแท็กร่างกายปิด

หากคุณต้องการรายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้ลองดูโพสต์ด่วนของฉันที่นี่: jQuery เลื่อนไปที่ id

หวังว่าจะช่วยได้และแจ้งให้เราทราบหากคุณมีข้อสงสัย

อีกตัวอย่างหนึ่ง:

ลิงค์ 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);
  });

จุดยึด HTML:

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

แน่ใจหรือไม่ว่าคุณกำลังโหลดไฟล์ปลั๊กอิน jQuery scrollTo

คุณอาจได้รับวัตถุ: วิธีการไม่พบข้อผิดพลาด "scrollTo" ในคอนโซล

วิธี scrollTO ไม่ใช่วิธี jquery ดั้งเดิม ในการใช้งานคุณจะต้องรวมไฟล์ jquery scroll To ไปยังปลั๊กอิน

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

soln: เพิ่มในส่วนหัว

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

สคริปต์นี้เป็นการปรับปรุงสคริปต์จาก Vector ฉันได้ทำการเปลี่ยนแปลงเล็กน้อยกับมัน ดังนั้นสคริปต์นี้ใช้ได้กับทุกลิงก์ที่มีการเลื่อนหน้าคลาส

ในตอนแรกโดยไม่ต้องผ่อนปรน:

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

สำหรับการทำให้สบายคุณจะต้องมี Jquery UI:

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

เพิ่มลงในสคริปต์:

'easeOutExpo'

สุดท้าย

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

ความเร็วในการเคลื่อนไหวทั้งหมดที่คุณสามารถหาได้ที่นี่: โกงแผ่น

รหัสนี้จะมีประโยชน์สำหรับลิงค์ภายในบนเว็บ

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

สามารถทำได้ใน JS ธรรมดา:

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

สนับสนุนเบราว์เซอร์เป็นปัญหาเล็กน้อย แต่เบราว์เซอร์ที่ทันสมัยสนับสนุนมัน

คุณสามารถทำได้โดยใช้รหัส jQuery ง่าย ๆ ดังต่อไปนี้

สามารถดูบทช่วยสอนการสาธิตและซอร์สโค้ดได้ที่นี่ - เลื่อนไปที่ div โดยใช้ 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>

ที่นี่ฉันลองสิ่งนี้มันใช้งานได้ดีสำหรับฉัน

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

นี่คือ simplest.Source- https://www.w3schools.com/jsref/met_element_scrollintoview.asp

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

สิ่งนี้ใช้ได้กับฉัน

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

ขอบคุณ

นี่เป็นวิธีแก้ปัญหาของฉันในการเลื่อนไปยัง div / anchor อย่างราบรื่นโดยใช้ jQuery ในกรณีที่คุณมีส่วนหัวคงที่เพื่อที่จะไม่เลื่อนไปข้างใต้ นอกจากนี้ยังใช้งานได้หากคุณเชื่อมโยงจากหน้าอื่น ๆ

เพียงแค่แทนที่ ".site-header" เพื่อ div ที่มีส่วนหัวของคุณ

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