Question

我在github插件中添加了平滑滚动效果。

github.com/simov/simplr-smoothscroll

我在呼吁中添加了效果：

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
<script src="http://simov.github.io/simplr-smoothscroll/lib/jquery.simplr.smoothscroll.js"></script>

然后我为效果添加了这段代码：

$(function () { $.srSmoothscroll() });

完成此操作后，我的页面不再向下滚动。它只向上滚动。为什么这不正常？

我添加此网站的网站是该网站的页面：

http://realtorcatch.com/test_index

我希望它能在以下后进行建模：

http://www.templatemonster.com/demo/51054.html

在githubs网站上，它说用法是：

$(function () {
 $.srSmoothscroll({
    // defaults
    step: 55,
    speed: 400,
    ease: 'swing',
    target: $('body'),
    container: $(window)
  })
})

但这对我的情况没有帮助。

有没有人对为什么不向下滚动有任何想法？

Answer 1

Zurb's Foundation Framework和$.srSmoothscroll()的 标准设置 在您的CSS文件中将body { height:100% }更改为{ {1}}。这解决了chrome47（win7 / osX 10.9）的问题。或者更改目标选项参数以使用包装器div：

body { height: auto }

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

Smooth Scrolling的更多详情。

Answer 3

如果您使用WordPress，为什么不下载这样的插件： https://wordpress.org/plugins/wp-smoother/

看看它是否有效，如果不是，那就是主题/ jQuery冲突问题

平滑滚动插件，不允许我向下滚动页面

3 个答案: