Like the title, because the sui framework is used, the anchor link effect of a has no effect. Although I disabled the routing function, it still doesn’t work. Is there any js method to return to the top? Or is there any master who is familiar with the sui framework, how should I achieve it? ?
天蓬老师2017-05-16 13:33:29
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1000);
console.log($(window).scrollTop())
console.log(window.innerHeight)
}
else {
$("#back-to-top").fadeOut(1000);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function () {
$('body,html').animate({scrollTop: 0}, 1000);
return false;
});
});
I wrote a small demo that can be triggered
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<meta name="robots" content="all">
<meta name="renderer" content="webkit">
<style>
*{
margin: 0;padding: 0;
}
p{
width: 100%;
height:1880px;
background: #BDBDBD;
}
.fix{
width: 50px;
height:50px;
background: #B72712;
position: fixed;
right: 0;
bottom: 50px;
color: #ffffff;
font-size: 18px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<p id="p">
我是主体内容
</p>
<p class="fix" id="back-to-top">
返回顶部
</p>
</body>
<script src="jquery.js"></script>
<script>
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1000);
console.log($(window).scrollTop())
console.log(window.innerHeight)
}
else {
$("#back-to-top").fadeOut(1000);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#back-to-top").click(function () {
$('body,html').animate({scrollTop: 0}, 1000);
return false;
});
});
</script>
</html>