文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在html中使用动画向下/向上滚动页面

问如何在html中使用动画向下/向上滚动页面
EN

Stack Overflow用户

提问于 2013-06-16 11:51:21

回答 3查看 4.7K关注 0票数 0

我想让简单的网站看起来像http://dipstrategy.com/

我能做的就是使用href跳转到指定的页面。

但我想让它向下滚动，而不是跳到指定的页面。有没有人有什么建议？谢谢你，鲁迪。

html

scroll

javascript

回答 3

Stack Overflow用户

回答已采纳

发布于 2013-06-16 12:04:24

<a href="#hello">hello</a>将转到<div id="hello">...</div>的顶部。

要使用jQuery进行平滑滚动：

$(document).ready(function(){
    $('a[href^="#"]').click(function(e) {
        e.preventDefault();
        var target = this.hash, $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function() {
            window.location.hash = target;
        });
    });
});

(来自here)。900在这里表示900毫秒。这是一个working fiddle。

票数 2

Stack Overflow用户

发布于 2013-06-16 11:54:02

此方法使用页面内的链接。基本上，在他们的导航链接中，他们已经使用了一个ID到他们页面的某个地方。在CSS中，他们添加了和ease in-out效果来平滑过渡。

更多信息可在此处找到：http://www.echoecho.com/htmllinks08.htm

票数 0

Stack Overflow用户

发布于 2013-06-16 11:54:02

     <div id="#home">content</div>
     <div id="#do">content</div>
     <div id="#team">content</div>
     <div id="#work">content</div>
     <div id="#contact">content</div>

在菜单中

 <div class="navigation ">
            <ul id="nav">
            <li class="margin-right15"><a href="#home">HOME</a></li>
            <li class="margin-right15"><a href="#do">WHAT WE DO</a></li>
            <li class="margin-right15"><a href="#team">CORE TEAM</a></li>
            <li class="margin-right15"><a href="#work">WORKS</a></li>
            <li><a href="#contact">CONTACT US</a></li>
        </ul>
        </div>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17130028

复制

相似问题

问如何在html中使用动画向下/向上滚动页面
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html中使用动画向下/向上滚动页面EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在html中使用动画向下/向上滚动页面
EN