关于网页中返回顶部按钮的定位

在实现返回顶部的功能实现中,一般使用position:fixed进行定位,position:fixed相对于浏览器窗口来进行定位。

关于网页中返回顶部按钮的定位_第1张图片

当网页并不是响应式而是宽度固定的网页,如果进行缩放,就会出现如下情况:

缩小时,因为fixed,就会偏向于右边窗口

关于网页中返回顶部按钮的定位_第2张图片

放大时,按钮又会偏向网页中心的问题

关于网页中返回顶部按钮的定位_第3张图片

看到幕课york讲师,有一个做法可以解决,margin-left和left一起使用。css样式添加:

position: fixed;
margin-left: 600px;
left: 50%;

关于网页中返回顶部按钮的定位_第4张图片

jq代码动态效果:

$(".top_btn").click(function(){
        $('body,html').animate({'scrollTop':0},1000);
});



你可能感兴趣的:(关于网页中返回顶部按钮的定位)