scrollTop如何实现click后页面过渡滚动到顶部

用JS操作，body元素的scrollTop

var getTop = document.getElementById("get-top");
var head = document.getElementById("head");
getTop.onclick = function () {var time = setInterval(function () {document.body.scrollTop = document.body.scrollTop - 50;if (document.body.scrollTop === 0) {clearInterval(time);}}, 1);};

下面不确定，网上找的没实验;

$(window).scroll(function(){if ($(window).scrollTop()>100){$("#backTop").fadeIn(1500);}else{$("#backTop").fadeOut(1500);}});//当点击跳转链接后，回到页面顶部位置$("#backTop").click(function(){$('body,html').animate({scrollTop:0},1000);return false;});
});

点击页面回到底部或者指定位置：

//  $(window).scroll(function () {
//    var scrollTop = $(this).scrollTop();
//    var scrollHeight = $(document).height();
//    var windowHeight = $(this).height();
//    console.log(scrollTop+','+scrollHeight+','+windowHeight)
//    if ((scrollTop + windowHeight) / scrollHeight > 0.99) {
//      $("#callMe").css("display", 'none')
//    } else {
//      $("#callMe").css("display", 'block')
//    }
//  });
$(".order").click(function(){var height=document.body.offsetHeight;
//  $(window).scrollTop(height,3000);$('html,body').animate({scrollTop: height}, 300)
})

滚动到顶部：

$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

滚动到指定位置：

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});

完整事例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js平滑滚动到顶部、底部、指定地方</title>
<script type="text/javascript" src="http://cdn.staticfile.org/jquery/2.1.1-rc2/jquery.min.js"></script>
<style>.box{ height:200px; width:100%; background:#ccc; margin:10px 0;}.location{ position:fixed; right:0; bottom:10px; width:20px; background:#FFC; padding:5px; cursor:pointer;color:#003};
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box bottom"></div>
<div class="location"><p class="scroll_top">返回顶部</p><p class="scroll_a">产品介绍</p><p class="scroll_bottom">滑到底部</p>
</div>
<script type="text/javascript">jQuery(document).ready(function($){$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});$('.scroll_bottom').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 800);});});
</script>
</body>
</html>

转载于:https://www.cnblogs.com/pengchengzhong/p/6027594.html

scrollTop如何实现click后页面过渡滚动到顶部相关推荐

移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究
移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究参考文章: (1)移动端和PC端弹出遮罩层后,页面禁止滚动的解决方法及探究 (2)https://www.cnblogs.com/ranyon ...
移动端有时候触发不了touchend 使用event.preventDefault()后页面无法滚动
使用移动端设备监听手指触摸事件时发现有时候无法触发touchend事件,因此在监听touchend事件时通过阻止页面默认事件 event.preventDefault()来实现事件监听,但是发现页面 ...
php序顶部导航,页面上下滚动改变顶部导航的定位方式
最近碰到设计师的一个设计效果要求,其他网站也有实现: state1:当网页向下滚动时,页面header栏消失,顶部nav往上靠: state2:当网页向上滚动时,页面header栏出现,顶部nav顺着 ...
html文本滚动到底后自动回到顶部,JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 DIV滚动至顶部后固定 Test Div function menuFixed(id) { var obj = document.getElementById(id ...
JavaScript中的scrollTop（js中的scrollTop，滚动到顶部，javascript滚动到顶部）
简述:scrollTop是JavaScript中一个非常有用且重要的方法,它用于获取或设置元素的垂直滚动条位置,实现各种滚动相关的功能,无论是回到顶部.滚动到指定位置还是监听滚动事件,都需要用到scr ...
使用Mpvue 使用 scroll-view 记录以及页面设置弹窗后页面滚动问题
1.scroll-view 使用 <scroll-view scroll-y="true"class="msg-list"@scrolltolower=& ...
ASP.NET小技巧——回传后保持页面的滚动位置
今天在MSDN上看到一篇文章,关于如何在ASP.NET页面回传后保持当前的滚动(垂直)位置. 这个技巧挺实用的,在此做简单的翻译介绍. 默认情况下,ASP.NET页面回传到服务器后,页面会跳回顶部. ...
click和touchmove vue_移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法...
这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且to ...
html 页面自动滚动,打开网页后屏幕自动滚动代码
双击页面自动滚动代码一: 以下代码直接放在你的网页中间就可以了 //双击鼠标滚动屏幕的代码 var currentpos,timer; function initialize() { timer=s ...
scrolltop 原生js_解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法...
最近在做博客的目录功能,发现一个在现代浏览器间的一个bug,或是称之为差异,即页面滚动值(scrollTop)的获取与设定. 在此之前先说一下关于页面元素的坐标获取,这张图的经典性不必再提. 实现滚动 ...

scrollTop如何实现click后页面过渡滚动到顶部

scrollTop如何实现click后页面过渡滚动到顶部相关推荐

最新文章

热门文章