Javascript 锚点目标滚动到顶部不起作用
Javascript anchor target scrollTo top don't work
信息
我使用目标来更改一些 CSS。这意味着我需要目标的行为才能继续工作。 preventDefault
可能不是一种选择?
问题
我希望window.scrollTo(0, 0);
可以使页面跳转到顶部。这并没有发生。为什么不呢?溶液?
斯菲德尔
你可以在jsfiddle上尝试一下。向下滚动以查看演示。我添加了填充。
.HTML
<a href="#test">Test</a>
<div id="test">My content</div>
Javascript (jQuery)
$("a").on("click", function(e){
window.scrollTo(0, 0);
});
.CSS
div {
background: green;
}
#test:target {
background: red;
}
a {
padding-top: 1900px;
display: block;
}
当你们准备好使用 jQuery 时,我会这样做
$("a").on("click", function(e){
$('html, body').animate({scrollTop:0}, 'fast');
});
您需要
在此处使用.preventDefault()
方法来取消单击的默认操作(导航)。
$("a").on("click", function (e) {
e.preventDefault();
window.scrollTo(0, 0);
});
更新
$("a").on("click", function (e) {
e.preventDefault();
$('#test').css('background-color', 'red')
window.scrollTo(0, 0);
});
小提琴演示
我自己回答这个问题。我找到了一种在我尝试过的所有情况下都有效的解决方案。其他答案都没有。
http://jsfiddle.net/8dmtN/6/
防止奇怪的跳跃
- 避免动画滚动顶部
保持定位点状态
- 使用window.location重定向它。
- 然后滚动到顶部。
jQuery
jQuery(document).ready(function($) {
$("a").on("click", function(e){
e.preventDefault();
var hash = $(this).attr('href');
window.location = hash;
window.scrollTo(0, 0);
});
});
相关文章:
- 滚动顶部在滑动后不起作用切换
- 滚动到顶部按钮在 chrome 或 safari 中不起作用
- Jquery顶部的两行Javascript不起作用
- 转到顶部按钮在Firefox浏览器中不起作用
- CSS z-index不起作用(使用相对定位,使用顶部和左侧)
- Zurb Foundation 5中的粘性顶部酒吧没有'不起作用
- 将IFrame滚动到顶部在Chrome中不起作用
- JQuery 使用 var 对边距顶部进行动画处理,不起作用
- 数据表个人搜索在放置在网格顶部时不起作用
- “返回顶部”按钮仅在窗口滚动时可见(但移动设备不起作用)
- 滚动到顶部按钮,jQuery在Safari v.7.0.5中不起作用
- Jquery 滚动到顶部偏移量不起作用
- 简单的滚动到顶部脚本不起作用
- Javascript 锚点目标滚动到顶部不起作用
- 移动到顶部功能在kineticJ中不起作用
- 由于父元素的顶部和位置,子元素单击不起作用
- 代码在以下情况下不起作用:<!DOCTYPE html>顶部
- 链接跳转到顶部和底部,但平滑滚动不会;不起作用
- I'm试图从<选择>列表顶部,但我的代码没有'似乎不起作用
- 简单滚动到顶部的过渡不起作用