巅峰霸主 > 设计开发 > 前端技术 > discuz返回顶部大骂

discuz门户自定义返回顶部代码配合bootstrap框架使用

时间:2021-02-05 21:58:30  来源:巅峰霸主网  作者:烈火大地 点击:
摘要:discuz默认的返回顶部按钮对于论坛帖子很友好,但是针对门户和文章页面,显得比较简单,有时候改了模板就会出现位置不对等情况,这里是结合bootstrap来修改的……

问题描述:门户使用bootstrap来实现响应式布局,使用了默认门户模板,但是返回顶部按钮却是固定的,也就是原来显示的是960px宽度的位置,主要是由于系统js控制了这个位置。

解决方法:直接重写一个返回顶部按钮组。

1、打开template/default/common/footer.htm文件,找到以下代码,大约在144~159行:

<div id="scrolltop">
    <!--{if $_G[fid] && $_G['mod'] == 'viewthread'}-->
    <span><a href="forum.php?mod=post&action=reply&fid=$_G[fid]&tid=$_G[tid]&extra=$_GET[extra]&page=$page{if $_GET[from]}&from=$_GET[from]{/if}" onclick="showWindow('reply', this.href)" class="replyfast" title="{lang fastreply}"><b>{lang fastreply}</b></a></span>
    <!--{/if}-->
    <span hidefocus="true"><a title="{lang scrolltop}" onclick="window.scrollTo('0','0')" class="scrolltopa" ><b>{lang scrolltop}</b></a></span>
    <!--{if $_G[fid]}-->
    <span>
        <!--{if $_G['mod'] == 'viewthread'}-->
        <a href="forum.php?mod=forumdisplay&fid=$_G[fid]" hidefocus="true" class="returnlist" title="{lang return_list}"><b>{lang return_list}</b></a>
        <!--{else}-->
        <a href="forum.php" hidefocus="true" class="returnboard" title="{lang return_forum}"><b>{lang return_forum}</b></a>
        <!--{/if}-->
    </span>
    <!--{/if}-->
</div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>

将这段代码替换为以下代码:

<script src="template/default/liehuo_style/js/jquery-3.5.1.slim.min.js?{VERHASH}" type="text/javascript"></script> 
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script><!--可以将cdn中的jQuery下载到服务器上,前面一行是引用本地的jQuery-->
<script type="text/javascript"> var jq = jQuery.noConflict(); </script>
<div class="container-xxl">
  <div class="y lh-dhmh">
    <div class="lh-scrolltop">
      <span><a title="{lang scrolltop}" onclick="window.scrollTo('0','0')" class="scrolltopa" ></a></span> </div>
  </div>
</div>
<script>
function gotop() {
    jq(window).scroll(function () {
    var scroll_top = jq(document).scrollTop();
    if (scroll_top > 230){
        jq(".lh-scrolltop").show(200);
    }else {
            jq(".lh-scrolltop").hide(200);
        }
    });
}
gotop();
</script>

2、添加css代码,使样式更好看,我使用的是discuz默认的样式,但是由于更改HTML代码,不能直接使用原来,只是把原来id类css改成了class,打开template/default/common/common.css文件,在这个文件的最后一行输入以下css代码:

/* 门户返回顶部 by烈火大地 */
.lh-scrolltop {
    display: none;
    position: fixed;
    bottom: 100px;
    margin: -30px 0 0 2px;
    width: 40px;
    background: #f4f4f4;
    border: 1px #cdcdcd solid;
    border-radius: 3px;
    border-top: 0;
    cursor: pointer;
}

.lh-scrolltop a {
    display: block;
    width: 30px;
    height: 24px;
    padding: 3px 5px;
    line-height: 12px;
    text-align: center;
    color: #787878;
    text-decoration: none;
    background: url(/static/image/common/scrolltop.png) no-repeat 0 0;
    border-top: 1px #cdcdcd solid;
}

css也可以放在你自定义的模板文件里面。演示网站看www.asneel.com门户文章等非论坛页面。

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


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

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

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