当我将html和body height设置为100%时，平滑滚动不起作用

Smooth Scroll doesn't work when I set the html and body height to 100%

本文关键字：100% 平滑 不起作用 滚动 设置 html height body      更新时间：2023-09-26
html, body {
   height: 100%;
   min-height: 100%;
   position: relative;
}
#home {
   height: 100%;
   background: url("../img/test.jpg") center no-repeat;
   background-size: cover;
}

我使用的平滑滚动JavaScript从CSS-Tricks

$(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
        }, 1000);
        return false;
      }
    }
  });
});

页面的第一部分是一个完整的页面图像，所以我需要html和body的高度为100%，以设置#home高度为100%，但由于某种原因，当我这样做时，平滑滚动效果不起作用，当我从html和body中删除高度:100%时，它确实起作用了。

有人有同样的问题吗?

使用最小高度:100% 的高度:100% 。

这可能有帮助。非常有用的链接。

http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/

相关文章：