简洁的可变透明度返回顶部按钮

转载

简洁的可变透明度返回顶部按钮

寻梦xunm| 291| 收集

6个月前

超过203天温馨提示

本文最后更新于2024年02月29日，已超过203天没有更新，若内容或图片失效，请留言反馈。

可变透明度返回顶部代码，如果向下滚动超过1200像素，按钮的透明度会下降，减少视觉干扰，更便于浏览内容主体，非常贴心的用户体验，兼容主流浏览器

js代码

// JavaScript Document
(function($){
    var goToTopTime;
    $.fn.goToTop=function(options){
        var opts = $.extend({},$.fn.goToTop.def,options);
        var $window=$(window);
        $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
        //$(this).hide();
        var $this=$(this);
        clearTimeout(goToTopTime);
        goToTopTime=setTimeout(function(){
            var controlLeft;
            if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) {
                controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg;
            }else{
                controlLeft = $window.width()- opts.pageWidthJg-$this.width();
            }
            var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6
            var controlTop=$window.height() - $this.height()-opts.pageHeightJg;
            controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop;
            var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false;
 
            if (shouldvisible){
                $this.stop().show();
            }else{
                $this.stop().hide();
            }
 
            $this.css({
                position: cssfixedsupport ? 'absolute' : 'fixed',
                top: controlTop,
                left: controlLeft
            });
        },30);
 
        $(this).click(function(event){
            $body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration);
            $(this).blur();
            event.preventDefault();
            event.stopPropagation();
        });
    };
 
    $.fn.goToTop.def={
        pageWidth:960,//页面宽度
        pageWidthJg:2 ,//按钮和页面的间隔距离
        pageHeightJg:100,//按钮和页面底部的间隔距离
        startline:300,//出现回到顶部按钮的滚动条scrollTop距离
        duration:500,//回到顶部的速度时间
        targetObg:"html"//目标位置,用body太恶心了，回不到最上面去
    };
})(jQuery);
$(function(){
    $('<a href="javascript:;" class="backToTop" title="返回顶部"></a>').appendTo("body");
});

我在原来的css修改了一点点，各位可以在原来的代码中重新修改。

.cd-top {
  z-index:9999;
  display: inline-block;
  border-radius: 3px;
  height: 38px;
  width: 38px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(https://yfch.top/img/top.png) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
}

.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 0.85;
}
.cd-top.cd-is-visible:hover {
  /* the button becomes visible */
    visibility: visible;
    background: #8BC34A url(https://yfch.top/img/top.png) no-repeat center 50%;
    opacity: 1;
}
.cd-top.cd-fade-out {
  /* 如果用户继续向下滚动,这个按钮的透明度会变得更低 */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
   .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 38px;
    width: 38px;
    right: 30px;
    bottom: 30px;
  }
}