javascript - 平滑滚动javascript的滚动问题

Question

这是一个复杂的问题。

我首先致力于让平滑滚动在 this question. 上工作

然后，我开始工作了。但是现在出现了另一个问题，我无法用鼠标滚动“平滑的可滚动内容(在 div#right 上)”。意思是不能手动上下滚动，除非我点击触发平滑滚动的链接。

另一件事是我的背景图片搞砸了。在 background-size 被设置为“覆盖”之前，它一直拉伸(stretch)开来。但是，当我进行更改以修复平滑滚动问题时，背景设置也变得一团糟，现在它的大小不正确。

当前状态 http://1ne-studio.com/test2/index2.html

id:test
pass:2015

正确的背景外观 http://1ne-studio.com/test2/index.html

我该如何解决这些问题...任何帮助将不胜感激!

Answer 1

好吧，那里有一些你做的事情我不确定为什么。但我在这里制作了一个与你的非常相似的页面 On jsfiddle .您制作的布局会随着宽度变小而降级，并且移动设备占流量的 50% 以上，您可能需要考虑一种移动友好的方法。无论如何，请查看链接，它包含您想要的一切(当然已最小化)。

我使用了jQuery动画功能

$.fn.scrollNav = function (margin_top) {

    event.preventDefault();
    var
       goTo = $(this).attr("href"),
       addTop = margin_top | 0;

    $('html, body').animate({
        scrollTop: $(goTo).offset().top + addTop
    }, 700);
}

它还使用到元素 <a href="#somewhere">here</a> 的普通链接这会做几件事:

• 1:用户已经知道如何使用它们
• 2:添加到浏览器历史记录中，这样如果用户想要点击后退按钮，它会将他们带到页面的先前位置，而不是他们来自的网站。

同样，链接中的布局更加流畅，并且不会因不同大小的桌面而退化得如此糟糕。当然，在您使用移动设备之前，您需要使用 @media 进行调整查询。

此外，如果需要，您现在可以选择添加边距顶部差值。使用该方法中的唯一参数，您可以提供一个将偏移滚动的数字。你可以使用，比如说，100它将在元素之后额外放置 100 个像素，或者你可以说 -100它将在元素之前 100 像素处着陆。

希望这对我的男人有帮助。如有任何问题，请随时提出，我会进行调整。