自定义返回顶部按钮

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>

<style>
@font-face {font-family: "iconfont";
  src: url('iconfont.eot?t=1534402548951'); /* IE9*/
  src: url('iconfont.eot?t=1534402548951#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAQkAAsAAAAABmgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFY9GEiUY21hcAAAAYAAAABLAAABcOfKt5BnbHlmAAABzAAAAGwAAABsygXgxmhlYWQAAAI4AAAALQAAADYSVMXLaGhlYQAAAmgAAAAcAAAAJAfeA4NobXR4AAAChAAAAAgAAAAICAAAAGxvY2EAAAKMAAAABgAAAAYANgAAbWF4cAAAApQAAAAgAAAAIAESACluYW1lAAACtAAAAUUAAAJtPlT+fXBvc3QAAAP8AAAAJQAAADZLQzZUeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2BkYWCcwMDKwMHUyXSGgYGhH0IzvmYwYuRgYGBiYGVmwAoC0lxTGByeLXq2iLnhfwNDDHMDQwNQmBEkBwD2dQ0neJxjYGBgZWBgYAZiHSBmYWBgDGFgZAABP6AoI1icmYELLM7CoARWwwISf7bo/38YCeSzgEkGRjaGUcADJmWgPHBYQTADIwC1HQvxAAAGAAAAAAP8AuYABwAKAA4AEgAYABwAABMzETMRMzUhAQchASERIRczESMBETM1MzUHIzUzBWJiYv7aAgujAUf+mAFH/rlig4MBBmLlYoODAX7+uAFIQQEmxP4VAYlB/voBR/53pOWkYwAAAHicY2BkYGAA4iP+XCfi+W2+MnCzMIDA9dkOX5BpFgamZ0CKg4EJxAMAJCsJ2AAAAHicY2BkYGBu+N/AEMPCAAJAkpEBFTABAEcIAmsEAAAABAAAAAAAAAAANgAAAAEAAAACAB0ABgAAAAAAAgAAAAoACgAAAP8AAAAAAAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJxjYGKAAC4G7ICJkYmRmYEnLTEvozQzJTMvPamUgQEALaAFFgAAAA==') format('woff'),
  url('iconfont.ttf?t=1534402548951') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('iconfont.svg?t=1534402548951#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fanhuidingbu:before { content: "\e6a2"; }
</style>
<html style='height:10000px'></html>

<script>
jQuery(document).ready(function($) {
    $("<div id='toTop'><div style='font-size: 40px;' class='iconfont icon-fanhuidingbu'></div></div>").appendTo("body");
    $("#toTop").css({
        bottom:"100px",
        right:"30px",
        position:"fixed",
        cursor:"pointer",
        zIndex:"999999"
    });
    if ($(this).scrollTop() == 0) {
        $("#toTop").hide();
    }
    $(window).scroll(function(event) {
        if ($(this).scrollTop() == 0) {
            $("#toTop").hide();
        }
        if ($(this).scrollTop() != 0) {
            $("#toTop").show();
        }
    });
    $("#toTop").click(function(event) {
        $("html,body").animate({
            scrollTop:"0px"
        }, 666);
    });
});
</script>
自定义返回顶部按钮

猜你喜欢
