javascript--返回顶部效果

window.onload = function(){
    var obtn = document.getElementById(‘btn‘);
    //客户端页面可视区高度
    var clientHeight = document.documentElement.clientHeight;
    var timer = null;
    var isStop = true;
    //判断在浏览器触发回到顶部时,用户是否滚动滚轮
    window.onscroll = function(){
        var osTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(osTop >= clientHeight){
            obtn.style.display = ‘block‘;
        }else{
            obtn.style.display = ‘none‘;
        }
        if(!isStop){
            clearInterval(timer);
        }
        isStop = false;
    }
    obtn.onclick = function(){
        //定时器
        timer = setInterval(function(){
            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
            var ispeed = Math.floor(-osTop / 6);
            isStop = true;
            document.documentElement.scrooTop = document.body.scrollTop = osTop + ispeed;
            if(osTop == 0){
                clearInterval(timer);
            }
        },30);
    }
}

//知识点1.获取元素,添加事件2.根据可视区域高度,判断元素显隐3.获取滚动条高度,设置定时器,通过一个表达式设置可变的滚动速度,模拟先快后慢的效果4.清除定时器的时机,1.滚动条高度为0;2.判断用户是否触发了滚动事件。

  

时间: 2024-12-28 00:17:50

javascript--返回顶部效果的相关文章

简单几步实现返回顶部效果

今天与大家分享下网页中经常出现的返回顶部效果 相比原生Javascript,jquery实现起来能够省略不少代码. 接下来就直接贴代码啦: 1 $(function(){ 2 $(window).scroll(function(){ //scroll--浏览器滚动条滚动式触发 3 var wHeight=$(window).height(); //获取浏览器可视窗口高度 4 var wTop=$(window).scrollTop(); //获取滚动条距离顶部高度 5 if(wTop>=wHei

javascript 返回顶部

<style>#linGoTopBtn {    POSITION: fixed; TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 30px; BOTTOM: 35px; HEIGHT: 33px; FONT-SIZE: 12px; CURSOR: pointer; RIGHT: 0px;}</style><script>function linGoTop(){    var obj = document.getElement

js返回顶部效果

当用户浏览的网页过于长的时候,用户在浏览到网页底部想要在返回顶部需要滚动好几次滚轮才能返回顶部,不仅麻烦,而且用户体验也会很差.现在的大多是页面都会在页面顶部或者是页面的可见区域的某一位置固定一个按钮,点击它可以使页面返回顶部,用户再也不用滚动滚轮了.下面我总结了集中常用的返回顶部的效果: 方法一(最简单,代码量最少,但是效果有些生硬).代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <

javascript返回顶部几种代码总结

纯js代码 /** * 回到页面顶部 * @param acceleration 加速度 * @param time 时间间隔 (毫秒) **/ function goTop(acceleration, time) { acceleration = acceleration || 0.1; time = time || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.

jQuery 返回顶部效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <script src="scripts/jquery-1.7.1.min.js"></script> </head> <body> <script type

css 返回顶部效果

相对 <div style="height: 300px;margin-top: 200px;border: 4px solid green;position: relative;"> <a style="position: absolute;right: 0;bottom: 0;">返回顶部</a> </div>

HTML页面实现返回顶部效果 go to top

1.首先导入jQuery插件. 2.js代码: $(window).scroll(function () { if($(window).scrollTop()>=100) { $(".backtop").fadeIn(); }else { $(".backtop").fadeOut(); } }); $(".backtop").click(function(event){ $('html,body').animate({scrollTop:

jquery实现返回顶部效果

jQuery("#gotop").css('display','none');jQuery(window).scroll(function(){if(jQuery(this).scrollTop()>100){jQuery("#gotop").fadeIn(1000)}else{jQuery("#gotop").fadeOut(750)}});jQuery("#gotop").click(function(){jQuer

JavaScript返回顶部小案例

<style type="text/css"> body,div{ margin: 0; padding: 0; font-size: 16px; } html,body{ height: 200%; } #div1{ position:fixed; right:0px; bottom:0px; background: red; width: 50px; height: 50px; line-height: 50px; background: yellow; font-si

原生js,实现“返回顶部”效果

html: <span>^</span> css body{                height: 3000px;            }            span{                display: block;                position: fixed;                bottom: 20px;                right: 10px;                font-size: 60px;