jQuery scrollTop-哈希错误
jQuery scrollTop - Issue with wrong hash
我正在尝试对位于全屏<section>
内部的锚点执行scrollTop动画,但第一次单击时不会滚动到右锚点。这是我的密码。
<nav id="scroller"> <a href="#subBox1">Scroll me to sub 1</a>
<a href="#subBox2">Scroll me to sub 2</a>
<a href="#subBox3">Scroll me to sub 3</a>
</nav>
<section id="boxTop"></section>
<section id="boxMaster">
<section id="subBox1">
<p>Hello. I am the Sub 1!</p>
</section>
<section id="subBox2">
<p>Hello. I am the Sub 2!</p>
</section>
<section id="subBox3">
<p>Hello. I am the Sub 3!</p>
</section>
</section>
$("#scroller a").click(function () {
$('#boxMaster').animate({
scrollTop: $(this.hash).offset().top
}, 700);
$("#scroller a").removeClass("active");
$(this).addClass("active");
});
小提琴
$("#scroller a").click(function() {
$('#boxMaster').animate({
scrollTop: $(this.hash).offset().top
}, 700);
$("#scroller a").removeClass("active");
$(this).addClass("active");
});
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#scroller {
position: fixed;
top: 0;
height: 30px;
text-align: center;
}
#scroller a {
color: #fff;
margin: 0 20px;
text-decoration: none;
}
#scroller a.active {
font-weight: bold;
text-decoration: underline;
}
#boxTop {
width: 100%;
height: 100%;
background: red;
}
#boxMaster {
width: 100%;
height: 100%;
background: blue;
overflow: hidden;
}
#boxMaster #subBox1,
#boxMaster #subBox2,
#boxMaster #subBox3 {
width: 100%;
height: 100%;
display: table;
}
p {
color: #fff;
text-align: center;
display: table-cell;
vertical-align: middle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="scroller"> <a href="#subBox1">Scroll me to sub 1</a>
<a href="#subBox2">Scroll me to sub 2</a>
<a href="#subBox3">Scroll me to sub 3</a>
</nav>
<section id="boxTop"></section>
<section id="boxMaster">
<section id="subBox1">
<p>Hello. I am the Sub 1!</p>
</section>
<section id="subBox2">
<p>Hello. I am the Sub 2!</p>
</section>
<section id="subBox3">
<p>Hello. I am the Sub 3!</p>
</section>
</section>
将当前滚动条值添加到offset().top()
,后者相对于帧的顶部,并去掉this.hash
。请改用this.href
。
$("#scroller a").click(function () {
var y=$('#boxMaster').scrollTop()
$('#boxMaster').animate({
scrollTop: $(this.href).offset().top + y
}, 100);
});
您需要将#boxMaster
元素的相对滚动到元素中链接的位置,并将其滚动到body
元素中#boxMaster
元素的top
位置的相对位置。
您可以将#boxMaster
元素的scrollTop()
值与其top
位置相加,然后从链接的偏移top
值中减去该值:
$(this.hash).offset().top - $('#boxMaster').position().top + $('#boxMaster').scrollTop()
更新示例
var $boxMaster = $('#boxMaster');
$boxMaster.animate({
scrollTop: $(this.hash).offset().top - $boxMaster.position().top + $boxMaster.scrollTop()
}, 700);
您可能还需要使用e.preventDefault()
防止链接元素的默认行为,然后手动将html
/body
元素滚动到#boxMaster
元素:
更新示例
$('html, body').animate({
scrollTop: $boxMaster.offset().top
}, 700);
我有一个固定的头。我从w3school的代码开始。然而,我已经为同样的问题挣扎了这么长时间,终于找到了解决"第一次点击不正确"问题的方法:
就在我的点击事件之前(外部),我简单地创建了一个变量"x",初始化为:
var x=1;
然后我在点击事件中有一个条件语句来检查x:
if (x==1) {
console.log("x is now: " + x);
x=0;
console.log("x is now: " + x);
jQuery("html, body").animate({
scrollTop: jQuery("div.class-of-element-i-am-scrolling-to" + hash).position().top - jQuery("div.header-container").outerHeight(true) - jQuery("h3.another-element-in-my-way").outerHeight(true)
}, 2000, function(){
return false;
});
} else {
jQuery("html, body").animate({
scrollTop: jQuery("div.class-of-element-i-am-scrolling-to" + hash).position().top
}, 2000, function(){
return false;
});
}
换句话说,使用"x"作为标志来检查这是否是第一次运行代码。
如果是这样的话,那么我就有点作弊了,减去了固定的头和其他元素,这些元素正在向上拉我想要的div。记住将"x=0"设为"drop"标志。
如果不是,那么它无论如何都能正常工作。
相关文章:
- 根据选项卡内部的文本链接中的哈希ID动态选择jqueryUI选项卡
- Steam Web API:I'我不知道该如何处理这个看起来像哈希的url来生成图像
- AngularJS:获取链接中没有哈希的查询字符串值
- 如何在Google chrome安全首选项文件中创建扩展安全哈希代码
- 如何在浏览器重新加载时保存位置哈希状态
- jQuery scrollTop-哈希错误
- 动态添加哈希标记;t工作
- 在Javascript中实现对哈希值的暴力攻击
- 如何在JavaScript/Node中计算SHA256哈希和Base64字符串编码
- 使用Javascript/jQuery以编程方式将当前锚点/哈希/片段附加到任何表单操作url
- YouTube API v3哈希标签搜索错误结果
- 为什么使用CryptoJS的哈希计算会在Angular中导致$rootScope:infdig错误
- 返回哈希时出现意外的令牌 { 错误
- 将错误的哈希字符串发送到文本区域中的 sha256 所有行
- 哈希更改事件可能的错误
- 哈希:引用错误:未定义要求
- javascript哈希映射中的QML集成错误
- 结合哈希密码Node.JS时出现PBKDF2错误
- crossroads.js哈希错误
- 不选择器和哈希符号语法错误