我有带有各自内容的引导程序选项卡。单击每个选项卡时，我必须将页面滚动到其内容，并且选项卡集可见。每当我单击非活动选项卡时，它将带我到正确的位置。但是，如果该选项卡已经处于活动状态，并且我单击了它，它将进一步滚动页面，而不是将我发送到正确的位置。
HTML代码
<div class="main-banner">
<!-- banner image -->
</div>
<div class="aboutus-nav">
<div class="container">
<ul class="aboutus-tabs">
<li class="col-md-4 col-xs-12 active"><a data-toggle="tab" href="#who-we-are">Who We Are</a></li>
<li class="col-md-4 col-xs-12"><a data-toggle="tab" href="#work-with-us">Work with us</a></li>
<li class="col-md-4 col-xs-12"><a data-toggle="tab" href="#about-dubai-holding">About Dubai Holding</a></li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="who-we-are" class="tab-pane fade in active">
<div class="about-livin">
<div class="section-facts">
<div class="container">
<div class="section-heading">
<h2>Enriching</h2>
<span class="sub-text">Lives Of People</span>
</div>
<div class="about-descp ">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tet ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<div class="h-divider"> </div>
<div class="highlighted-txt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
<div class="corporate-facts">
<div class="container">
<ul>
<li>
<div class="fact-number">
<span>22,000</span>
</div>
<div class="units">
<span>Units</span>
</div>
</li>
<li>
<div class="fact-number">
<span>9</span>
</div>
<div class="units">
<span>Communities</span>
</div>
</li>
<li>
<div class="fact-number">
<span>55,000</span>
</div>
<div class="units">
<span>Happy tenants</span>
</div>
</li>
<li>
<div class="fact-number">
<span>Fact</span>
</div>
<div class="units">
<span>New projects</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mission-vision">
<div class="mv-img">
<img src="images/static/about-us-mission.jpg"/>
</div>
<div class="container">
<div class="mission-sec">
<h3>Our mission</h3>
<div class="m-txt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tet ever since the 1500s,</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tet ever since the 1500s,</p>
</div>
</div>
<div class="vision-sec">
<h3>Our vision</h3>
<div class="v-txt">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tet ever since the 1500s,</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tet ever since the 1500s,</p>
</div>
</div>
</div>
</div>
<div class="about-community">
<div class="container">
<div class="section-heading">
<h2>Its All</h2>
<span class="sub-text">About You</span>
</div>
<div class="about-community-txt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy tet ever since the 1500s,</div>
<div class="about-community-sec">
<ul class="about-community-sec-main">
<li>
<span class="ac-icon"><img src="images/community/icon-location-feature.jpg"/></span>
<div class="ac-title">Your Home, Within A Community</div>
<div class="ac-descp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</li>
<li>
<span class="ac-icon"><img src="images/community/icon-fun.jpg"/></span>
<div class="ac-title">Your Home, Within A Community</div>
<div class="ac-descp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</li>
<li>
<span class="ac-icon"><img src="images/community/icon-24.jpg"/></span>
<div class="ac-title">Your Home, Within A Community</div>
<div class="ac-descp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</li>
<li>
<span class="ac-icon"><img src="images/community/icon-location-feature.jpg"/></span>
<div class="ac-title">Your Home, Within A Community</div>
<div class="ac-descp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</li>
<li>
<span class="ac-icon"><img src="images/community/icon-fun.jpg"/></span>
<div class="ac-title">Your Home, Within A Community</div>
<div class="ac-descp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</li>
<li>
<span class="ac-icon"><img src="images/community/icon-24.jpg"/></span>
<div class="ac-title">Your Home, Within A Community</div>
<div class="ac-descp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</li>
<li>
<span class="ac-icon"><img src="images/community/icon-24.jpg"/></span>
<div class="ac-title">Your Home, Within A Community</div>
<div class="ac-descp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</li>
<li>
<span class="ac-icon"><img src="images/community/icon-24.jpg"/></span>
<div class="ac-title">Your Home, Within A Community</div>
<div class="ac-descp">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
</li>
</ul>
<div class="button"><button class="explore-btn btn-link"><span>SHOW MORE</span><span class="fa fa-angle-down"></span></button></div>
</div>
</div>
</div>
<div class="leadership-section">
<div class="container">
<div class="leadership-wrapper">
<div class="leader-img">
<div class="image">
<img src="images/static/Arif_mubarak 2.png" />
</div>
</div>
<div class="leadership-content">
<span class="l-title">Our Leadership</span>
<h3>Mr. Arif Mubarak</h3>
<div class="designation">Chief Executive Officer, DUBAI ASSET MANAGEMENT</div>
<div class="l-descp">
<p >Arif Mubarak is the Chief Executive Officer of Dubai Asset Management, a new company established under Dubai Holding, focused on developing, acquiring and managing a broad range of rental residential assets across Dubai.</p>
<p>Under his leadership, Dubai Asset Management is set to transform Dubai’s residential eco-system by providing reliable and enjoyable living experiences across an extensive portfolio of affordable and upscale housing options.</p>
<p>Overseeing a portfolio of over 25,000 units that are home to more than 100,000 people, Arif is determined to steer the organization towards its goals, and set the foundations for a prosperous future. A determination that is rooted in his inherent understanding that Dubai’s most valued assets are its residents. Through sound strategy development, targeted growth opportunities and creating a cohesive organization that fosters employee development, Arif strives to achieve Dubai Holding’s mission to deliver service excellence to customers through a varied portfolio.</p>
<p>In his last role at Dubai Holding, Mubarak was the Chief Executive Officer of Dubai Properties Asset Management (DPAM) where he established and managed a diversified portfolio of assets for Dubai Properties including residential, commercial, retail and hospitality assets.</p>
<p>A founding member of the management team at Dubai Holding where he spent over 18 years since 2000, Mubarak was also a founding member of Dubai Media City under TECOM group, and has served many leadership roles from Group Chief Real Estate Officer to Group Chief Operations Officer of Dubai Properties between 2008 to 2014. He also was the Chief Executive Officer of BAWADI LLC from 2006 to 2008.</p>
<p>What Arif has to say about Asset Management – “Asset Management is a business that requires a comprehensive approach to maintain business continuity and more importantly a convenient and enjoyable experience for residents. From investment and development decisions, to upgrading our offerings to ensure quality service, amenities and unique living experiences, and the seamless management of assets, the entire process intends to enhance efficiencies and create value for the business and the customer.”</p>
<p>What Arif has to say about Customer Centricity – “Dubai Asset Management’s communities are built and managed around residents’ needs to enrich their living experiences, by offering them choice, quality and value. As such, the company’s strategy and operations are aligned with this purpose, and every member of our team works towards ensuring that this is achieved.”</p>
<p>What Arif has to say about Team Work & Collaboration – “Team work and collaboration are the foundation of any customer centric company. At Dubai Asset Management, we strive to ensure a fostering environment that encourages innovation and the exchange of knowledge and supports the growth and development of our people.” </p>
</div>
<div class="readmore" style="">
<span class="read-more-text">Read Less</span>
<span class="fa fa-angle-down"></span>
</div>
<div class="view-profile">
<img src="images/static/icon-linkedin.jpg">
<a href="#">View Linkedin Profile</a>
</div>
</div>
</div>
</div>
</div>
<div class="find-home">
<div class="find-home-image">
<div class="image">
<img src="images/homepage/find-home.png" alt="find home" />
</div>
</div>
<div class="find-home-details">
<div class="section-heading">
<div class="heading-text">
<h2>Ready to find</h2>
<span class="sub-text">Your New Home?</span>
</div>
</div>
<div class="find-home-content">
<p><span>Dubai Asset Management services a wide segment of customers, giving them the opportunityto make Dubai home.</span></p>
<div class="button">
<a href="#" class="btn-link btn-large">Explore our communities</a>
</div>
</div>
</div>
</div>
</div>
<div id="work-with-us" class="tab-pane fade in">
<div class="section-facts">
<div class="container">
<div class="section-heading">
<h2>Our Culture</h2>
<span class="sub-text">Foundation of our Success</span>
</div>
<div class="about-descp ">
<p>Our Culture is the foundation of success - and what sets us apart. Our winning spirit drives the high performance we deliver each and every day</p>
</div>
</div>
</div>
<div class="empowering-value-sec">
<div class="container">
<h3>Living our values, empowering our people</h3>
<div id="" class="empowering-value-carousel">
<ul class="row">
<li class="col-md-4 col-xs-12">
<div class="values-sec">
<div class="v-img"><img src="images/static/a-img1.png"></div>
<div class="v-txt">
<h4>Work Culture</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</li>
<li class="col-md-4 col-xs-12 margin-top80">
<div class="values-sec">
<div class="v-img"><img src="images/static/a-img.png"></div>
<div class="v-txt">
<h4>Work Culture</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</li>
<li class="col-md-4 col-xs-12">
<div class="values-sec">
<div class="v-img"><img src="images/static/a-img2.png"></div>
<div class="v-txt">
<h4>Work Culture</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</li>
</ul>
</div>
<div class="joinus about-us">
<h3>Interested in joining us?</h3>
<div class="highlighted-txt">
We are looking for driven, ambitious, and goal oriented professionals who want to make a difference and succeed
</div>
<div class="applybtn"><a href="#">Apply through Job Board</a></div>
<div class="divider"><span>OR</span></div>
<div class="job-para">If you think you might be a good fit, but don't see your role listed?<br/> Please send your resume to <a href="mailto:jobs@mixpanel.com">jobs@mixpanel.com</a></div>
</div>
</div>
</div>
<div class="related-info">
<div class="related-info-gallery">
<ul class="row">
<li class="col-md-4 col-xs-12"><img src="images/static/r-img1.jpg"></li>
<li class="col-md-4 col-xs-12"><img src="images/static/r-img1.jpg"></li>
<li class="col-md-4 col-xs-12"><img src="images/static/r-img1.jpg"></li>
</ul>
</div>
<div class="related-descp">
<p>We don’t just accept differences - we celebrate it, we support it, and we thrive on it for the benefit of our employees, our services and our communities. We are proud to be an equal opportunity workplace and is an affirmative action employer</p>
</div>
</div>
</div>
<div id="about-dubai-holding" class="tab-pane fade in">
<div class="dubai-holding-main">
<div class="dubai-holding-section">
<div class="container">
<div class="section-logo">
<img src="images/static/Dubai_holding_logo.png">
</div>
<div class="dubai-holding-heading ">
<p>Established in 2004 with operations in <span>12 countries</span> and employing over <span>20,000 people</span>, Dubai Holding is a major investment conglomerate managing <span>AED 130 billion portfolio </span>of assets.</p>
</div>
<div class="content-txt">
<p>
In line with the Leadership's vision, Dubai Holding supports Dubai's economic diversification strategy and play an influential role in delivering on initiatives such as Tourism Vision 2020, Dubai Innovation Strategy and Dubai Industrial Strategy. The current project pipeline includes Marsa Al Arab, Emirates Towers Business Park and Dubai Creek Harbour, a joint venture with Emaar Properties to build a futuristic waterfront city at The Lagoons
</p>
<p>
Dubai Holding is committed to the strong development of Dubai’s non-oil economy across multiple sectors including: tourism, hospitality, real estate, media, ICT, education, design, and trade. Their portfolio includes:
</p>
</div>
</div>
<!-- About Dubai Holding boxes -->
<div class="dubai-holding-groups">
<div class="container">
<div class="dubai-holding-company">
<ul>
<li class="col-md-4 col-xs-12">
<div class="holding-logo">
<img src="images/static/tecom-group-logo-english.jpg">
</div>
<div class="holding-txt">
<div class="r-name">
<p>managing 13 of Dubai’s most successful business communities</p>
</div>
</div>
</li>
<li class="col-md-4 col-xs-12">
<div class="holding-logo">
<img src="images/static/jumeirah-logo.png">
</div>
<div class="holding-txt">
<div class="r-name">
<p>operating 20 hotels and resorts in the Middle East, Europe and Asia </p>
</div>
</div>
</li>
<li class="col-md-4 col-xs-12">
<div class="holding-logo">
<img src="images/static/Dubai-Properties-Logo.png">
</div>
<div class="holding-txt">
<div class="r-name">
<p>one of the largest fully integrated, community development businesses in the Emirate</p>
</div>
</div>
</li>
<li class="col-md-4 col-xs-12">
<div class="holding-logo">
<img src="images/static/Arab_Media_Group.svg">
</div>
<div class="holding-txt">
<div class="r-name">
<p>implementing a strategic plan to develop new family destinations and further grow digital media business lines. </p>
</div>
</div>
</li>
<li class="col-md-4 col-xs-12">
<div class="holding-logo">
<img src="images/static/dubai_retail.jpg">
</div>
<div class="holding-txt">
<div class="r-name">
<p>operating versatile commercial venues offering holistic retail solutions </p>
</div>
</div>
</li>
<li class="col-md-4 col-xs-12">
<div class="holding-logo">
<img src="images/static/Dubai-Properties-Logo.png">
</div>
<div class="holding-txt">
<div class="r-name">
<p>managing residential communities and living spaces to deliver top of the line experiences </p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- About Dubai Holding Ends-->
</div>
</div>
</div>
</div>
JS代码
$(window).on('load',function(){
var tabMenu = $('.aboutus-nav');
var tabItems = tabMenu.find('.aboutus-tabs > li > a');
tabItems.click(function (e){
var bannerHeight = $('.main-banner').outerHeight();
var abtUsTabHeight = $('.aboutus-nav').outerHeight();
var heightToAdjust = bannerHeight - abtUsTabHeight;
var href = $(this).attr('href');
$('html, body').stop().animate({
//scrollTop: $(href).offset().top + bannerHeight - 50
scrollTop: $(href).offset().top + heightToAdjust
}, 850);
e.preventDefault();
});
});
href变量将包含单击的选项卡的编号。我已经调整了滚动条，并添加了bannerHeight-选项卡的导航高度。