简单的JS返回顶部和一键切换背景色和颜色（日间夜间模式）

HTML

<button id="xgtotop"><i class="xulgricon">&#xe621;</i></button>
<button id="xglink"><i class="xulgricon">&#xe692;</i></button>

CSS需先定义xgtotop默认不显示

#xgtotop{
    position: fixed;
    bottom: 85px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
    color: #000;
    display: none;/*默认不显示*/
}
#xglink{
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background-color: #fff;
    color: #000;
}
#xgtotop i,#xglink i{font-size: 25px;}

需先引入jquery.min.js

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

JS

//返回顶部
window.onscroll = function(){
    var xgjuding = document.documentElement.scrollTop || document.body.scrollTop;
    var xgtotop = document.getElementById( "xgtotop" );
    if( xgjuding >= 300 ) {
        xgtotop.style.display = "inline";
    } else { 
        xgtotop.style.display = "none";
    }
}
//锚点
jQuery(document).ready(function($) {
    $("#xgtotop").click(function(event) {
        var xgtobody = "body";//返回到顶部，默认body标签是最顶部
        $("html,body").animate({scrollTop: $(xgtobody).offset().top-0}, 800);
    });
});

//日夜切换
var count= 1;
$("#xglink").click(function(){
	count = count+1;
	if(count%2 == 0){
		document.querySelector("#xgbgqh").style.backgroundColor = "#fff";
		document.querySelector("#xgbgqh").style.color="#000";
		document.querySelector("#xgtotop").style.backgroundColor = "#000";
		document.querySelector("#xgtotop").style.color="#fff";
		document.querySelector("#xglink").style.backgroundColor = "#000";
		document.querySelector("#xglink").style.color="#fff";
		$(this).html('<i class="xulgricon">&#xe693;</i>');
	}
	else{
		document.querySelector("#xgbgqh").style.backgroundColor = "#000";
		document.querySelector("#xgbgqh").style.color="#fff";
		document.querySelector("#xgtotop").style.backgroundColor = "#fff";
		document.querySelector("#xgtotop").style.color="#000";
		document.querySelector("#xglink").style.backgroundColor = "#fff";
		document.querySelector("#xglink").style.color="#000";
		$(this).html('<i class="xulgricon">&#xe692;</i>');
	}
})

 

 

运行DEMO