平滑滚动的滚动问题 javascript

Question

这是个复杂的问题。

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

上发挥作用

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

另一件事是我的背景图片搞砸了。在将 background-size 设置为 "cover" 之前，它会一直延伸。但是，当我进行更改以解决平滑滚动问题时，背景设置也变得一团糟，现在大小不正确。

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

id:test
pass:2015

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

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

Answer 1

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

我使用了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);
}

它也对元素使用正常的 links <a href="#somewhere">here</a> 这会做一些事情：

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

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

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

希望这对我的男人有帮助。有什么问题欢迎随时提出，我会及时调整。

平滑滚动的滚动问题 javascript

Scrolling issue with smooth scrolling javascript

javascript

jquery

html

css

smooth-scrolling