Question

我有一个滚动到同一页面区域的链接。所以页面没有跳转，我添加了一些JavaScript平滑滚动（见下文）。

问题是，脚本将页面滚动到目标div的顶部。它通过一些缓和来实现这一点，因此当它到达最终div时它会变慢。这很好，但是如果最后一个div小于浏览器窗口的高度，它将永远无法滚动到div的顶部。它只是触及页面的底部，它的外观破碎，因为没有缓和。

我已经尝试了几种方法让最后的div滚动到div的底部，但无济于事。任何想法如何做到这一点？

我在这里提出了一个问题：https://jsfiddle.net/gky7y6gu/2/

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

Answer 1

我添加了一些逻辑，以确保scrollTop永远不会超过正文的高度减去窗口的高度。这样，easeOut始终可见。

https://jsfiddle.net/gky7y6gu/3/

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
      var target = $(this.hash);
      if (target.length) {
        var scrollTo = target.offset().top;
        var bodyHeight = $('body').height();
        var windowHeight = $(window).height();
        if (bodyHeight - windowHeight < scrollTo) {
          scrollTo = bodyHeight - windowHeight;
        }
        $('html,body').animate({
          scrollTop: scrollTo
        }, 1000);
        return false;
      }
    }
  });
});

JS平滑滚动，滚动到最终/底部div的底部而不是顶部

1 个答案: