Powered by md-Blog  文 - 篇  访客 -

写一个基于jQuery的回到顶部效果及置顶按钮制作


更新:2020-02-19 19:58:34  /  创建:2020-02-19 19:58:34  /  分类:写一个Demo  / 
不要删除

1、先看效果

移动端

img

PC端

img

2、先在 iconfont 找一个箭头 Logo

地址:https://www.iconfont.cn/

img

调整好参数点击 复制SVG 按钮,粘贴到 js文件 里面,下面代码块会附带。

3、js 文件

// 记得加载 jQuery 文件。

$(document.ready(function(){
    // 置顶按钮
    var scroll_top = '<div class="scroll_top"><svg t="1578536579009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6483" width="30" height="30"><path d="M93.334 700.269c0-14.331 5.512-27.677 15.529-37.657l365.99-365.34c1.306-1.337 2.417-2.38 3.607-3.234l2.723-2.16c10.703-10.653 23.296-15.888 36.627-15.888 13.571 0 26.26 5.351 35.73 15.053l363.953 367.853c9.813 9.951 15.222 23.238 15.222 37.401 0 13.848-5.25 26.931-14.769 36.832-9.549 9.841-22.867 15.507-36.518 15.506-13.484 0-26.259-5.365-35.969-15.134l-328.283-331.846-336.964 336.081c-9.666 9.607-22.296 14.915-35.619 14.915-13.958 0-27.055-5.673-36.876-15.937-9.271-9.768-14.381-22.734-14.381-36.444z" p-id="6484" fill="#cdcdcd"></path></svg></div>';
    $("body").append(scroll_top);
    $('.scroll_top').click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 320);
        return false;
    });

    $(window).scroll(function(){
        if($(document).scrollTop() > 400){
            $('.scroll_top').fadeIn();
        }
        if($(document).scrollTop() < 400){
            $('.scroll_top').fadeOut();
        }
    })
})

4、css 样式文件

.scroll_top{
    display: none;
    position: fixed;
    right: 3%;
    bottom: 3%;
    width: 4rem;
    height: 4rem;
    line-height: 5.5rem;
    color: rgb(131, 131, 131);
    text-align: center;
    cursor: pointer;
    border-radius: 3rem;
    box-shadow: 0 0 .5rem rgb(218, 218, 218);
    background: rgba(255, 255, 255, .3);
}
.scroll_top:hover{
    box-shadow: 0 0 .8rem rgb(175, 175, 175);
}
不要删除

小站不易,感谢支持!