移动端悬浮小球

head

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

style

.addnav{
   display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    position: fixed;
    top:0;
    left:0;
    z-index:10;
}
.addnav_content{
    position: fixed;
    right:0.17rem;
    bottom: 1.53rem;
    z-index:10;
    width: 0.82rem;
    height: 0.82rem;
}
.addnav .cont{
    display: block;
    width: 72px;
    height: 180px;
    position: fixed;
    right:8px;
    bottom: 77px;
    background: transparent;
}
.addnav .cont .add_img1{
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto;
    background: red;
    border-radius: 50%;
    margin-top: -6px;
}
.addnav .cont a{
    display: block;
    width: 72px;
    height: 24px;
    line-height: 24px;
    margin-bottom: 20px;
    border-radius: 0.06rem;
    text-align: center;
    font-size: 0.24rem;
    color: #313131;
    background: #fff;
    border: 1px solid #e1e1e1;
}
.addnav .cont a.fb{
    color: #fe732a;
}
.add_img{
    display: block;
    width: 48px;
    height: 48px;
    position: fixed;
    right:20px;
    bottom: 77px;
    z-index:10;
    background: black;
    border-radius: 50%;
}

html

<div class="addnav" id="addnav">
   <div class="cont" id="add_cont">
      <a class="gr" href="javascript:void(0)">个人中心</a>
      <a class="fb" href="javascript:void(0)">详情</a>
      <a class="fh" id="btn-scroll" href="javascript:void(0)">返回顶部</a>
      <span class="add_img1" id="add_img1"></span>
    </div>
</div>
<span class="add add_img" id="add_img"></span>

js

function xuanf(){
    var flag = 0; //标记是拖曳还是点击
    var open = document.getElementById('add_img');
    var add_cont = document.getElementById('add_cont');//弹窗div
    var disX,moveX,L,T,starX,starY,starXEnd,starYEnd;
    open.addEventListener('touchstart',function(e){
        flag = 0;
        e.preventDefault();//阻止触摸时页面的滚动，缩放
        disX = e.touches[0].clientX - this.offsetLeft;
        disY = e.touches[0].clientY - this.offsetTop;
        //手指按下时的坐标
        starX = e.touches[0].clientX;
        starY = e.touches[0].clientY;
    });
    open.addEventListener('touchmove',function(e){
        flag = 0;
        L = e.touches[0].clientX - disX ;
        T = e.touches[0].clientY - disY ;
        //移动时 当前位置与起始位置之间的差值
        starXEnd = e.touches[0].clientX - starX;
        starYEnd = e.touches[0].clientY - starY;
        //移动的位置是否小于10
		if (Math.abs(starYEnd) <= 10 &&  Math.abs(starXEnd) <= 10) {
            return;
        }
        
        flag = 1;
        if(L<0){//限制拖拽的X范围，不能拖出屏幕  距屏幕左侧12px
            L = 12;
        }else if(L > document.documentElement.clientWidth - this.offsetWidth){ //距屏幕右侧12px
            L=document.documentElement.clientWidth - this.offsetWidth-12;
        }
        if(T<0){//限制拖拽的Y范围，不能拖出屏幕
            T=0;
        }else if(T>document.documentElement.clientHeight - this.offsetHeight){
            T = document.documentElement.clientHeight - this.offsetHeight;
        }
        moveX = L + 'px';
        moveY = T + 'px';
        //弹窗跟随
        var addleft = L-12 + 'px';
        var addtop;
        if(T<132){
        addtop = 10 + 'px'
        }else{
        addtop = T-132 + 'px';
        }
        add_cont.style.left = addleft;
        add_cont.style.top = addtop;

        this.style.left = moveX;
        this.style.top = moveY;
    }, false);
    open.addEventListener('touchend', function(e){
    if (flag === 0) {
        document.getElementById('addnav').style.display="block";
        this.style.display="none";
    }
    e.preventDefault();
    }, false);
}
xuanf();
var close = document.getElementById('add_img1');
close.onclick = function(){
    document.getElementById('addnav').style.display="none";
    document.getElementById('add_img').style.display="block";
}