Question

我很好奇如何制作一个带有按钮的网页，滚动到不同的位置（顺畅，不是直接跳到该位置）。

以下是一个示例：http://creativefreedomguide.com/

我从源代码中看到它使用Bootstrap作为菜单。 Bootstrap是否具有支持此功能的功能。

感谢您的帮助！

Answer 1

应该相当容易。

这是一个jsfiddle http://jsfiddle.net/7Ne9B/ 包括来自上面包含的fizzbuzz的css-tricks的jquery。

 $(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 2

pedalpete打败了我，但自从我完成了这项工作后，我将分享一个非常不同的例子。

jsFiddle

唯一真正的区别是我包含了一个回到顶部的选项

<a name="top">link/div/something to go back to</a>

然后

<a href="#top">Top</a>

在网页侧面制作位置滚动按钮

2 个答案: