滾動到 jquery 中的 ID 問題

Question

我正在嘗試創建到ID的平滑滾動。 當我點擊一個鏈接時，它的 ID 應該滾動到頁面的頂部（在頂部的某個點。例如：200px from top）。

我試過這樣的事情：

var $root = $('html, body');
  $('a[href*=#]').click(function() {
      var href = $.attr(this, 'href');
      $root.animate({
          scrollTop: (($(href).offset().top >= 200 ) ? $(href).offset().top : 200)
      }, 500, function () {
          window.location.hash = href;
      });
      return false;
  });

但它不起作用，它總是滾動到頁面頂部。 希望有人可以幫助我。

Answer 1

我猜，問題是你的href ，可能找不到目標。 也許您最好將要滾動到的元素存儲在數據屬性中，如下所示：

$('a[href*=#]').click(function(evt) {
    evt.preventDefault();
    var target = $(this).data('target');
    $('html, body').animate({
        scrollTop: $(target).offset().top
    }, 2000);
});

使用這樣的錨標簽：

<a href="#" data-target="#somewhere_over_the_rainbow">Brilliant rainbow colors</a>

顯然，ID 為somewhere_over_the_rainbow的元素必須存在於您的 DOM 中的某處。

Answer 2

這應該正確地完成工作：

$('a[href*=#]').click(function() {

 var href = $.attr(this, 'href');
 var top = $(href).offset().top;
 $('body').animate(
    {
     scrollTop: top - 200
    },
    500
 );
 return false;
});

很明顯，id等於錨的hash的item一定存在。