问题描述:门户使用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门户文章等非论坛页面。