Question

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

我可以做的是使用href跳转到指定的页面。

但是我想让它向下滚动，而不是跳转到指定的页面。任何人都可以提出建议吗？谢谢，关心鲁迪。

Answer 1

<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。

Answer 2

此方法使用页面内的链接。基本上在他们的导航链接中，他们使用ID到他们页面的某个地方。在CSS中，他们随后添加了缓入影响以平滑过渡。

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

Answer 3

W3

     <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>

我如何用html中的动画向下/向上滚动页面

3 个答案: