jquery如何实现当页面下拉到一定位置时,右下角出现回到顶部图标

这个该写在什么事件里呢?怎么判断页面位置呢?... 这个该写在什么事件里呢?怎么判断页面位置呢? 展开
 我来答
CL有毒
推荐于2017-10-02 · TA获得超过511个赞
知道小有建树答主
回答量:216
采纳率:0%
帮助的人:119万
展开全部

重写window.onscroll()事件,先将返回顶部div设置为position:fixed;right:10px;bottom:10px;display:none,一旦event.scrollTop>100(100可以设置为你想要的值)就display:block(fadeIn()),否则display:none(fadeOut())。还要设置返回顶部div点击事件,onclick(function(){$('body,html').animate({scrollTop:0},1000);}),这个什么意思不用我多说吧,既然搞Jquery,动画还是应该晓得。

<style type="css/text">
    #gotop{position:fixed;right:10px;bottom:10px;display:none}
</style>
<div id="gotop"></div>
<script type="javascript/text">
    $(function(){
        $(window).scroll(function(){
            if($(window).scrollTop > 100){
                $("#gotop").fadeIn(1000);//一秒渐入动画
            }else{
                $("#gotop").fadeOut(1000);//一秒渐隐动画
            }
        });
        
        $("#gotop").click(function(){
            $('body,html').animate({scrollTop:0},1000);
        });
    });
</script>

刚写的,没测试,有问题再问我。

布故鸟
推荐于2018-05-11 · 超过40用户采纳过TA的回答
知道小有建树答主
回答量:217
采纳率:100%
帮助的人:67.1万
展开全部
这个用js来实现
$(function () {
showScroll();
function showScroll() {
$(window).scroll(function () {
var scrollValue = $(window).scrollTop();
scrollValue > 100 ? $('div[class=scroll]').fadeIn() : $('div[class=scroll]').fadeOut();
});
$('#scroll').click(function () {
$("html,body").animate({ scrollTop: 0 }, 200);
});
}
});
当距离顶部100时,显示返回顶部div
本回答被网友采纳
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
丨Medivh丨
2014-10-25 · 超过12用户采纳过TA的回答
知道答主
回答量:29
采纳率:0%
帮助的人:24万
展开全部
<script type="text/javascript">    
    
        $(function () {    
            $(window).scroll(function () {    
                if ($(window).scrollTop() > 103) {     
                    $('#top').css('display','block');    //<div id-'top'></div>假如有这么个div是那个向上图标的div。css默认none
                    }    
            else {     
                $('#top').css('display','none');    
            }    
        });    
    });    

</script>
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式