滾動到元素

Question

我有一個滾動到元素的腳本。當你點擊一個<a href>，然後你滾動到該元素。

該腳本的作品，但現在的問題。腳本滾動到元素。但我仍然希望腳本滾動到下面的元素+ 100像素。

我該怎麼做這個腳本？

感謝您的幫助！

腳本：

window.smoothScroll = function() { 
    if (document.querySelectorAll === void 0 || window.pageYOffset === void 0 || history.pushState === void 0) { 
     return 
    } 
    var e = function (e) { 
     if (e.nodeName === "HTML") return -window.pageYOffset; 
     return e.getBoundingClientRect().top + window.pageYOffset 
    }; 
    var t = function (e) { 
     return e < .5 ? 4 * e * e * e : (e - 1) * (2 * e - 2) * (2 * e - 2) + 1 
    }; 
    var n = function (e, n, r, i) { 
     if (r > i) return n; 
     return e + (n - e) * t(r/i) 
    }; 
    var r = function (t, r, i) { 
     r = r || 500; 
     var s = window.pageYOffset; 
     if (typeof t === "number") { 
      var o = parseInt(t) 
     } else { 
      var o = e(t) 
     } 
     var u = Date.now(); 
     var a = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || function (e) { 
       window.setTimeout(e, 15) 
      }; 
     var f = function() { 
      var e = Date.now() - u; 
      window.scroll(0, n(s, o, e, r)); 
      if (e > r) { 
       if (typeof i === "function") { 
        i(t) 
       } 
      } else { 
       a(f) 
      } 
     }; 
     f() 
    }; 
    var i = function (e) { 
     e.preventDefault(); 
     if (location.hash !== this.hash) window.history.pushState(null, null, this.hash); 
     r(document.getElementById(this.hash.substring(1)), 500, function (e) { 
      location.replace("#" + e.id) 
     }) 
    }; 
    document.addEventListener("DOMContentLoaded", function() { 
     var e = document.querySelectorAll('a[href^="#"]'), 
      t; 
     for (var n = e.length; t = e[--n];) { 
      t.addEventListener("click", i, false) 
     } 
    }); 
    return r 
}() 

Answer 1

你這個標記爲「jQuery的」，所以我想你會接受一個jQuery解決方案： 這是更簡單和更短。

你沒有提供你的HTML標記，所以我不知道什麼在你的頁面怎麼回事，但你可以做這樣的事情：

$("#button").click(function() { 
    $('body').animate({ 
     scrollTop: $("#div7").offset().top +100 
    }, 1000); 
}); 

這裏是一個例子：Fiddle