巅峰霸主 > 设计开发 > 前端技术 > 返回顶部位置修改

discuz返回顶部按钮位置修改方法

时间:2021-02-02 16:41:55  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:discuz如果使用窄屏时返回按钮会紧贴板块的位置,这是感觉还是挺好的,如果使用宽屏或者自己修改了模板,这时候返回顶部按钮就不是想要的了……

看我的这个,因为我修改了模板,这时候返回顶部菜单就一直紧贴着浏览器的右边,用户体验很不好。

图片.png

修改的地方其实主要是JS和css,两处可以任意选择一处修改即可。

1、修改js来实现:/static/js/common.js 中的 showTopLink() 函数,关键在于下面这句:

if (basew < 1000) {

以我的 Discuz 使用的模板来说,模板宽度为 1000px,正好处于临界点,所以 页面滚动的时候,出现的 “回顶部” 会靠在右边浏览器滚动栏,要想还原为紧邻页面主体右侧,可以修改上述两处中的任意一处即可!这里我修改了第二处为 1100 ,效果很好!


2、修改css来实现:template/default/common/common.css 中的#scrolltop部分的 margin 属性,默认为:

margin: -30px 0 0;// 上 右 下 左

将其修改为:

margin: -30px 30px 0;// 上 右 下 左

主要是第二个数字,将原来的0改为30px,这样返回按钮的位置就会距离右边30px,不过这样是绝对定位,对于不同宽度分辨率的电脑用户体验还是不够友好,建议使用第一种方法。

(责任编辑:陆柏熺)
评价:
用户名: 验证码: 看不清?点击更换


关注站长自媒体 获取更多优质内容

  • 百家号
    百家号
  • 头条号
    头条号
  • 企鹅号
    企鹅号

2019-2021 ©巅峰霸主网 京ICP备12023415号-2
返回
顶部