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门户文章等非论坛页面。