javascript-jQuery淡出“返回页首”链接.页面加载链接可见性

2019-10-30 20:44:08 阅读：164 来源： 互联网

我正在尝试实现一个“返回页首”链接,一旦用户向下滚动页面一定数量,该链接就会淡入我的页面.

我已经注意到,在我的某些页面上,“返回页首”链接将在隐藏自身之前在页面上闪烁,但在其他页面上则不会.为了找出“链接闪烁”的原因,我创建了一个JS小提琴供您查看我的编码,并希望找出导致不一致的原因. JS小提琴本身似乎工作正常,但这可能只是因为它在小提琴中.我是否可以添加一行代码来确保链接在加载时被隐藏？

感谢您抽出宝贵的时间查看此内容.非常感谢.

http://jsfiddle.net/uLUWV/

的HTML

<div class="container">
Test Content
</div>    
<p id="back-top"><a href="#top"><span>Go To Top</span></a></p>

的CSS

#back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;}
#back-top a {width: 83px; display: block;}
#back-top span {width: 83px; height: 94px; display: block; background-color:red;}

.container {height:4000px;}

jQuery的

$(document).ready(function(){

    // hide #back-top first
    $("#back-top").hide();

    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 500) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});

解决方法:

发现您的问题.

您需要放入CSS#back-top {display：none}.

一个在那里,但是它被您的媒体查询所覆盖.您只需要一个用于显示的特定选择器.

在skin.css中添加此行,它应该纠正错误：

p#back-top{display : none}

之后检查您的媒体查询是否仍然有效.如果否,那么您在查询中也必须更加具体.

现在,.hide()隐藏了您的按钮.因此,一旦您可以通过CSS隐藏按钮,就可以删除此行.

标签：scrolltop,css,javascript,jquery
来源： https://codeday.me/bug/20191030/1970763.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-jQuery淡出“返回页首”链接.页面加载链接可见性