单击菜单中的关于或联系后如何滚动到div? [英] How to scroll to div after click on About or Contact in my menu?

问题描述

在我的菜单中单击关于"或联系人"后，如何滚动到div(例如#about，#contact)?

How to scroll to div (e.g: #about, #contact) after click on About or Contact in my menu?

<div class="masthead">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
</div>

推荐答案

您的html:

<div class="masthead">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
</div>
<div id="about">about</div>
<div id="contact">contact</div>

您的JavaScript:

Your javascript:

$('ul.nav').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    window.scrollTo($anchor.left,$anchor.top);
    return false;
});

如果要使用动画，请替换

If you want to use animate, replace

window.scrollTo($anchor.left,$anchor.top);

作者

$('body').animate({ scrollTop: $anchor.top });

这篇关于单击菜单中的关于或联系后如何滚动到div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！