我的页内 anchor 标记有问题。单击向下箭头时,<a href="#two">
,它应该向下滚动到 <div id="two">
.它在 Chrome 和 Safari 中工作得很好,但 Firefox 根本没有将箭头注册为链接。
我试过更改 <div>
到<a>
标签,替换 <div id="two">
与 <a name="two">
,我似乎无法在 Firefox 中为我工作。
想法?
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
* {
font-family: 'Helvetica Neue', serif;
font-weight: lighter;
letter-spacing: 1px;
}
.arrow {
color: black;
font-size: 5em;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.arrow:hover {
color: lightgray;
}
.button {
background-color: transparent;
border-color: transparent;
margin-left: 50%;
margin-right: 50%;
margin-bottom: 250px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<div>
<button class="button">
<a href="#two">
<span class="fontawesome-angle-down arrow"></span>
</a>
</button>
</div>
<div id="two" class="section">
<article class="fade relative">
<div id="name">
<a href="#">
<a href="https://iamtrask.github.io/" target="_blank">
<img src="http://placehold.it/350x150" alt="I Am Trask" />
</a>
</a>
<h2 class="absolute-text art-title">I AM TRASK</h2>
<div id="hidden" class="absolute-text">
<p>• bullet 1<br>• bullet 2</p>
</div>
</div>
</article>
</div>
最佳答案
只需删除 <button>
标记,在这种情况下它没有意义,因为您不需要按钮,而是图标。在下面的代码片段中,我分配了你的 .button
类到父 div 并删除按钮元素本身。
我还添加了这个来去掉箭头链接下面的下划线:
.button a {
text-decoration: none;
}
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
font-family: 'FontAwesome', sans-serif;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
* {
font-family: 'Helvetica Neue', serif;
font-weight: lighter;
letter-spacing: 1px;
}
.arrow {
color: black;
font-size: 5em;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
.arrow:hover {
color: lightgray;
}
.button {
background-color: transparent;
border-color: transparent;
margin-left: 50%;
margin-right: 50%;
margin-bottom: 250px;
}
.button a {
text-decoration: none;
}
#two {
height: 800px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>
<div class="button">
<a href="#two">
<span class="fontawesome-angle-down arrow"></span>
</a>
</div>
<div id="two" class="section">
<article class="fade relative">
<div id="name">
<a href="#">
<a href="https://iamtrask.github.io/" target="_blank">
<img src="http://placehold.it/350x150" alt="I Am Trask" />
</a>
</a>
<h2 class="absolute-text art-title">I AM TRASK</h2>
<div id="hidden" class="absolute-text">
<p>• bullet 1<br>• bullet 2</p>
</div>
</div>
</article>
</div>
关于jquery - 页内 anchor 在 Firefox 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41538530/