1

我无法让这个锚转换工作！请告诉我你的想法。

这是CSS

a.transition {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

这是HTML

<h1 id="intro">Let's Build Something... </h1>
<h1 id="intro2"><a class="transition" href="#create">Together</a>.</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p><a name="create" class="transition">My name is Geoff Phillips, and I'm an innovator. What can I create for you?<a/></p>
4

2 回答 2

8

我认为您不能仅使用 CSS 来做到这一点。这是一个用 jQuery 实现它的函数：

$('a[href^=#]').on("click",function(e){
    var t= $(this.hash);
    var t=t.length&&t||$('[name='+this.hash.slice(1)+']');
    if(t.length){
        var tOffset=t.offset().top;
        $('html,body').animate({scrollTop:tOffset-20},'slow');
        e.preventDefault();
    }
});​

这适用于任何<a href="#any-id-or-name">锚。 演示。

要使其滚动得更快或更慢，请更改'slow'为'fast'以毫秒为单位的任何数值。

于 2012-09-28T16:20:54.137 回答
0

您可以使用scrollIntoView JavaScript 方法滚动到页面的任何元素。它适用于任何元素。 document.getElementById("yourElement").scrollIntoView();将滚动到yourElement。使用 Firefox，您甚至可以通过添加{behavior:'smooth'}作为方法的参数来平滑滚动。不幸的是，这不是跨浏览器。

如果你想要一个跨浏览器的 VanillaJS 库，我会推荐Smooth-scroll

于 2016-01-19T10:45:41.163 回答