Question

我正在创建一个导航，这样当我点击我的标签时，它会滚动到它所选择的元素。但是我该怎么做才能让它在动画时动画

从：

<a href="#Home">Home</a>

为：

<div id="Home">
    <h2>HOME</h2>
</div>

我想如果它可能是jquery的东西。

Answer 1

您可以使用Jquery

执行此类操作

$("a").click(function() { 
   $("html,body").animate({scrollTop: $("#home").offset().top});
});

Answer 2

参考： Smooth Scrolling

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

随意更改动画的速度，当前设置为1000毫秒（一秒）到您喜欢的任何值。请记住，此代码将影响所有锚标记，这些锚标记引用HTML文档中具有匹配ID的元素。

Answer 3

你可以这样做：

JS Fiddle

var links = $('#links a');

links.on('click', function(e){
    e.preventDefault();
    var theHREF = $(this).attr('href'),
        sectionTop = $(theHREF).offset().top;
    $("html, body").stop().animate({scrollTop:sectionTop}, 500);
})

创建一个指向单页导航的动画点

3 个答案: