雀恰营销
专注中国网络营销推广

js 实现平滑回到顶部

js 实现平滑回到顶部

js实现平滑回到顶部

使用锚链接是实现回顶部最简单的方式回到顶部,但就用户体验而言,并不是最好的。 (锚链接回到顶部太快了)

JavaScript 实现回到顶部js 实现平滑回到顶部,带有动画版本

这里使用JavaScript脚本来实现返回顶部的功能。

先看一下“返回顶部”按钮的css和html代码:


div#backToTop{
        position:fixed;
        display:none;
        bottom:100px;
        right:20px;
    }


下面的 JavaScript 部分:

js 实现平滑回到顶部



$(function(){
    //滚动超过一屏幕应该显示,否则消失
    var pagelookheight = document.documentElement.clientHeight;
    $(function () {
        $(window).scroll(function(){
            if ($(window).scrollTop()>pagelookheight){
                $("#backToTop").fadeIn(500);
                //$("#backToTop").style.display = "block";
            }
            else
            {
                $("#backToTop").fadeOut(500);
                //$("#backToTop").style.display = "none";
            }
        });

        //当点击跳转链接后,回到页面顶部位置
        $("#backToTop").click(function(){
            if ($('html').scrollTop()) {
                $('html').animate({ scrollTop: 0 }, 100);//动画效果
                return false;
            }
            $('body').animate({ scrollTop: 0 }, 100);
            return false;
        });
    });
});

改进,不再是匀速

下面的代码也实现了返回顶部的效果,不同的是返回顶部的按钮采用了图片来实现js 实现平滑回到顶部,返回顶部的过程不再是等速。


#backToTop {

    z-index:3000;
    width:48px;
    height: 48px;
    position:fixed;
    right:35px;
    bottom:30px;
    background:url(/index/img/gotop.png)  no-repeat  left top ;
}
#backToTop:hover {
    background:url(/index/img/gotop.png)  no-repeat  -48px top;
}




$(function(){

    //滚动超过一屏幕应该显示,否则消失
    var pagelookheight = document.documentElement.clientHeight;
    var topTimer = null;
    $(function () {
        $(window).scroll(function(){
            if ($(window).scrollTop()>pagelookheight){
                $("#backToTop").fadeIn(500);
                //$("#backToTop").style.display = "block";
            }
            else
            {
                $("#backToTop").fadeOut(500);
            }
        });
        //当点击跳转链接后,回到页面顶部位置
        $("#backToTop").click(function(){
            topTimer = setInterval(function () {

js 实现平滑回到顶部

var backtop = document.body.scrollTop; //速度操作 减速 var speedtop = backtop/5; document.body.scrollTop = backtop -speedtop; //高度不断减少 if(backtop ==0){ //滑动到顶端 clearInterval(topTimer); //清除计时器 } }, 30); return false; }); }); });

以下是一些返回顶部按钮图像示例:

js 实现平滑回到顶部

赞(0) 打赏
未经允许不得转载:雀恰营销 » js 实现平滑回到顶部
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

文章对你有帮助就赞助我一下吧

支付宝扫一扫打赏

微信扫一扫打赏