MD *_*ari 8 html javascript css jquery scroll
我有以下jQuery代码
$(document).ready(function () {
$('.navtoTop').click(function(){
$("html").scrollTop( $("#topofthePage").offset().top );
});
});
其中'navtoTop'是按钮的类(类似'返回顶部'),它在页面的左下角有固定位置,'topofthePage'是<div>我页面最顶部的id .
我甚至试过这个
$('.navtoTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
这是html代码
<body>
<div id="topofthePage"></div>
...
...
<img src="navtoTop.png" class="navtoTop">
</body>
我不知道出了什么问题,但这不起作用.有人会解释并给出一个好的解决方案吗？
如果需要,请向我询问代码的详细信息.
tax*_*ala 15
你必须使用window而不是html:
$(window).scrollTop( $("#topofthePage").offset().top );
请注意,window不应将其括在引号中,因为它是对象而不是标记.
一个常见的 scrollTo 问题是在 css 中的“html, body”元素上设置了溢出。在 html/body 元素上出现滚动/动画问题时很少提及，最终可能会导致过度设计。
如果需要设置overflow，只放在body元素上即可。不是 html,body。
使用 data-* 属性代替 html 中的类或 ID 也是一个好习惯。这让您养成将样式与代码分开的习惯。考虑这一点，让您将来的生活更轻松：
创建可重用的滚动函数
scrollioreceiver = function(sender) {
$(sender).on({
click: sentFrom
});
function sentFrom(){
var dataMine = $(this).attr('data-sender'),
dataSend = $('[data-receiver="'+dataMine+'"]');
$('html, body').animate({
scrollTop: $(dataSend).offset().top - 70
}, 800, function() {
// if you need a callback function
});
}
}
为 html 元素创建数据属性（数据名称是任意的，应该有意义）：
添加 HTML 链接
<a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>
添加 HTML 元素
<div data-receiver="ScrollToMatch">Scrolls To This Element</div>
验证 CSS » 添加到“html,body”的溢出不起作用
body { overflow-x: hidden; }
INIT FUNCTION ON READY » 使用属性名称选择器在文档就绪时进行初始化，以在多个调用上创建灵活性
scrollioreceiver('[data-sender]');
希望这可以帮助！
| 归档时间： |
|
| 查看次数： |
30921 次 |
| 最近记录： |