使用DIV元素中包含的按钮滚动到页面的特定部分
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用DIV元素中包含的按钮滚动到页面的特定部分相关的知识，希望对你有一定的参考价值。
好的，我的主页有不同的部分。
这是菜单栏的代码：
<div class="col-xs-10 text-right menu-1 main-nav">
<ul>
<li class="active"><a href="#" data-nav-section="home">Home</a></li>
<li><a href="#" data-nav-section="services">Services</a></li>
<li><a href="#" data-nav-section="about">About Digm</a></li>
<li><a href="#" data-nav-section="contact">Contact Us</a></li>
<li><a href="#" data-nav-section="audit"><b>FREE Audit</b></a></li>
</ul>
</div>
对于我需要他们关注的部分，这些工作正常。
但我也有用DIV元素包装的按钮用于幻灯片放映。如果我将它们设置为外部链接以离开我的网站，按钮可以工作，但他们不会让我使用它们转到我可以通过菜单栏链接转到的相同部分。
这些是带按钮的DIV：
<div id="ubea-hero" class="js-fullheight" data-section="home">
<div class="flexslider js-fullheight">
<ul class="slides">
<li style="background-image: url(images/img_bg_1.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner">
<h2>It's time to shift strategies.</h2>
<p><a href="#audit" data-nav-section="audit" class="btn btn-primary btn-lg">FREE Audit</a></p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Experience The Butterfly<br />Effect</h2>
<p><a href="#aboutdigm" class="btn btn-primary btn-lg" data-nav-section="about">Read More</a></p>
</div>
</div>
</div>
</li>
<li style="background-image: url(images/img_bg_3.jpg);">
<div class="overlay"></div>
<div class="container">
<div class="col-md-10 col-md-offset-1 text-center js-fullheight slider-text">
<div class="slider-text-inner" text-align: center>
<h2>Ready? Book A Consultation</h2>
<p><a href="#" target="_blank" class="btn btn-primary btn-lg">Why Wait?</a></p>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
我对这些部分的代码如下所示：
<div id="ubea-contact" data-section="contact" class="ubea-cover ubea-cover-xs" style="background-image:url(images/img_bg_2.jpg);">
<div class="overlay"></div>
<div class="ubea-container">
<div class="row text-center">
<div class="display-t">
<div class="display-tc">
<div class="col-md-12">
<h3>If you have inquiries please email us at <a href="#"><b>info@blahblahblah.com</b></a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
任何人都明白为什么按钮不会滚动到这些部分？
答案
锚元素href属性默认情况下这样做。只需为目标元素提供与菜单锚点上的id匹配的href="#introduction"属性。
<div>
<ul>
<li><a href="#intro" data-nav-section="services">Intro</a></li>
</ul>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="intro">Intro</h4>
<p>Foo bar.</p>另一答案
你的CSS是什么样的？
你总是可以使用javascript：
// we can't use "forEach" on a NodeList, since it's an Array prototype
var forEach = [].forEach;
// listen for an "onclick" event on the target button
document.getElementById("button_id").addEventListener("click", function() {
// select the target slide
var slide = document.getElementById("slide_1");
// show the target slide
slide.style.display = "block";
// hide the slides siblings
forEach.call(slide.parentNode.children, function(s) {
// NOTE: don't hide the target slide!
if(s !== slide) {
s.style.display = none;
}
});
});
或者如果您愿意，可以使用jQuery：
$("#button_id").on("click", function() {
$(this).show().siblings().hide();
});
另外，避免使用这么多div，尝试使用semantic tags代替。
太多div将使你的代码难以维护和过度使用div标签可能导致div soup，这可能是可怕的维护。
祝好运。
以上是关于使用DIV元素中包含的按钮滚动到页面的特定部分的主要内容，如果未能解决你的问题，请参考以下文章
使用纯 Javascript 滚动到可滚动 DIV 内的元素
使用纯 Javascript 滚动到可滚动 DIV 内的元素