Heim > Backend-Entwicklung > PHP-Tutorial > javascript - html a href 跳转锚时,可以往下移一些的方式?

javascript - html a href 跳转锚时,可以往下移一些的方式?

WBOY
Freigeben: 2016-06-06 20:44:51
Original
1135 Leute haben es durchsucht

html 里有设定 <header></header>
也就是说上面有「一小块的按钮」(各位前辈应该很常见)

使用 a herf="#id" 锚点,来作移页面的动作,但是 点击连结 锚点会带页面到「最上面」,也就是说会有一部份被「header 」的部份盖掉
我要如何 在跳锚点往下移一些呢?

跟这个差不多
http://segmentfault.com/q/1010000000124208

不过,我的 div id 是用产生的,当然我也试过一些 js

<code>$(function(){ 
  if(location.hash){ 
     var target = $(location.hash); 
     if(target.length==1){ 
         var top = target.offset().top-100; 
         if(top > 0){ 
             $('html,body').animate({scrollTop:top}, 1000); 
         } 
     } 
  } 
}); 
</code>
Nach dem Login kopieren
Nach dem Login kopieren

求大大解

1201 修改 hmtl如下

<code>      天下系統我最爛
    
</code>
Nach dem Login kopieren
Nach dem Login kopieren

回复内容:

html 里有设定 <header></header>
也就是说上面有「一小块的按钮」(各位前辈应该很常见)

使用 a herf="#id" 锚点,来作移页面的动作,但是 点击连结 锚点会带页面到「最上面」,也就是说会有一部份被「header 」的部份盖掉
我要如何 在跳锚点往下移一些呢?

跟这个差不多
http://segmentfault.com/q/1010000000124208

不过,我的 div id 是用产生的,当然我也试过一些 js

<code>$(function(){ 
  if(location.hash){ 
     var target = $(location.hash); 
     if(target.length==1){ 
         var top = target.offset().top-100; 
         if(top > 0){ 
             $('html,body').animate({scrollTop:top}, 1000); 
         } 
     } 
  } 
}); 
</code>
Nach dem Login kopieren
Nach dem Login kopieren

求大大解

1201 修改 hmtl如下

<code>      天下系統我最爛
    
</code>
Nach dem Login kopieren
Nach dem Login kopieren

想要偏移到下面,应该只能用js了吧。

看了一楼那个朋友的方法,把他的span标签的样式改了一下,

<code class="lang-css">.placeholder{
display:block; 
width:100px; 
height:50px; 
margin-top:-50px; 
}
</code>
Nach dem Login kopieren

无 js 的实现。

欢迎采纳。

使用position:absolute;脱离文档流的方法改变锚点的位置,同时不影响展现。

http://jsbin.com/teqisuve/5/

PS. 采纳楼下的更新

不跳转到你想要的元素,在它上面设置一个空元素,跳到那

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage