锚定到同一页面 [英] Anchoring to the same page
问题描述
我想指向同一页面中的一部分。所以使用了锚定方法。但问题是，我在顶部有一个静态导航栏。所以该部分的标题会在菜单栏下方显示，因为锚点已设置为标题。菜单栏的 100px 高度。我想知道是否有什么方法可以显示这个标题？
如果您想了解更多详情，请告诉我。
<！--- NAVIGATION BAR SECTION ------>
< div class =navbar navbar-default navbar-fixed-top>
< div class =container>
< a class =navbar-brandhref =index.html>< img id =logosrc =img / logo.png>< / a>
< button class =navbar-toggledata-toggle =collapsedata-target =。navHeaderCollapse>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< div class =collapse navbar-collapse navHeaderCollapse>
< ul class =nav navbar-nav navbar-left>
< / ul>
< ul class =nav navbar-nav navbar-right>
< li>< a href =features.html>功能< / a>< / li>
< li>< a href =pricing-and-signup.html> PRICING< / a>< / li>
< li id =scroll2class =navLog>< a href =https://my.clickmeter.com>登录< / a>< / li>
< li id =scroll3class =navLog>< a href =pricing-and-signup.html>免费注册< / a>< / li>
< / ul>
< / div>
< / div>
< / div>
<！--- NAVIGATION BAR ENDS ------>
这是我要移动到其他部分的导航部分
< div class =jumbotron action-block-green>
< div class =container text-center>
< div class =row>
< div class =col-sm-8>
< ul class =nav navbar-nav navbar-left>
< li>< a href =＃technology>技术< / a>< / li>
< li>< a href =＃screenshot> SCREENSHOTS< / a>< / li>
< li>< a href =＃features> FEATURES< / a>< / li>
< / ul>
< / div>
< div class =col-sm-4>
< / div>
< / div>
< / div>
< / div>
我将第一个链接（技术）锚定在这里
< div class =jumbotron sectionBlock white>
< div class =container text-center>
< h2 id =technologystyle =color：＃202020; margin-top：0px;> Cutting-Edge Technology< / h2>
< h3>准确，可靠，可扩展，高性能< / h3>
< p style =margin：10px 0> blabhfufwehuf wiuefh wiu hfiuw fiuw fiuwhe fiwu hfiwue fhiwuh f< / p>
< div class =rowstyle =margin-top：20px;>
< div class =col-md-4>
< div class =certified-uptime>< / div>
< / div>
< div class =col-md-4>
< div class =multiple-datacenters>< / div>
< / div>
< div class =col-md-4>
< div class =hosteb-by>< / div>
< / div>
< / div>
< / div>
< / div>
我会使用jQuery滚动并更改锚点在DOM上不存在的元素的URL中， id 或 name 的值相同。 （这样滚动不会自动完成）
$（窗口）.on（'hashchange'，function（） {
//您可以手动查看它或使用jQuery计算它使用$ .height（）;
var header = 60;
//获取锚点并替换下划线
var value = window.location.hash.replace（'_'，''）;
//获取目的地
var dest = $（value）.position （）;
//如果元素存在于DOM
if（typeof dest！==undefined）{
var dtop = dest.top;
//继续滚动
$（'html，body'）。animate（{
scrollTop：dtop - header
}，1000）;
}
}）;
我的示例中的链接看起来像 #_ link1 和需要出现在DOM中的id应该像 id =link1 ：
< div id =menu>
< a href =#_ link1>链接1< / a>
< a href =#_ link2> ;链接2< / a>
< a href =#_ link3>链接3< / a>
< / div>
...
< h1 id =link1> Link 1< / h1>
当然，您可以更改下划线（ _ ）在任何其他您想要的字符或符号的URL上。只要确保将其替换为我提供的代码的替换语句中的空字符串。
I wanted to point to a portion in the same page. So used the anchor method. But the problem is, I have a static navigational bar at the top. So the heading of the section goes below the menu bar since the anchor is set to the heading. The menu bar is of 100px height. I was wondering if there is any way we can show this heading too?
If you want more details, just let me know.
<!---NAVIGATION BAR SECTION------>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="index.html"><img id="logo" src="img/logo.png"></a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-left">
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="features.html">FEATURES</a></li>
<li><a href="pricing-and-signup.html">PRICING</a></li>
<li id="scroll2" class="navLog"><a href="https://my.clickmeter.com">LOGIN</a></li>
<li id="scroll3" class="navLog"><a href="pricing-and-signup.html">SIGN UP FREE</a></li>
</ul>
</div>
</div>
</div>
<!---NAVIGATION BAR ENDS------>
This is the nav section from which I wanted to move to other portions
<div class="jumbotron action-block-green ">
<div class="container text-center">
<div class="row">
<div class="col-sm-8">
<ul class="nav navbar-nav navbar-left">
<li><a href="#technology">TECHNOLOGY</a></li>
<li><a href="#screenshot">SCREENSHOTS</a></li>
<li><a href="#features">FEATURES</a></li>
</ul>
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</div>
I anchored the first link (technology) to here
<div class="jumbotron sectionBlock white ">
<div class="container text-center">
<h2 id="technology" style="color:#202020;margin-top: 0px;">Cutting-Edge Technology</h2>
<h3>Accurate, Reliable, Scalable and Hi Performace</h3>
<p style="margin:10px 0">blabhfufwehuf wiuefh wiu hfiuw fiuw fiuwhe fiwu hfiwue fhiwuh f</p>
<div class="row" style="margin-top:20px;">
<div class="col-md-4">
<div class="certified-uptime"></div>
</div>
<div class="col-md-4">
<div class="multiple-datacenters"></div>
</div>
<div class="col-md-4">
<div class="hosteb-by"></div>
</div>
</div>
</div>
</div>
I would do the scrolling using jQuery and changing the anchors in the URL to elements that don't exist on the DOM with the same value for id or name. (so that the scroll is not done automatically)
$(window).on('hashchange',function(){
//you can see it manually or calculate it using jQuery by using $.height();
var header = 60;
//Getting the anchor and replacing the underscore
var value = window.location.hash.replace('_', '');
//getting our destination
var dest = $(value).position();
//if the element exist on the DOM
if(typeof dest !== "undefined"){
var dtop = dest.top;
//proceeding to scroll
$('html, body').animate({
scrollTop: dtop - header
}, 1000);
}
});
The links in my example look like #_link1 and the id needed to appear in the DOM should be like id="link1:
<div id="menu">
<a href="#_link1">Link 1</a>
<a href="#_link2">Link 2</a>
<a href="#_link3">Link 3</a>
</div>
...
<h1 id="link1>Link 1</h1>
Of course, you can change the underscore (_) on the URL for any other character or symbol you want. Just make sure to replace it for an empty string on the replace statement of the code I provided.
这篇关于锚定到同一页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
