js置顶功能_js滚动条置顶-CSDN博客

本文链接：https://blog.csdn.net/m0_56506584/article/details/128819635

本文介绍了一种使用JavaScript实现的页面滚动顶部按钮的方法。当用户向下滚动页面超过一定距离时，该按钮会自动显示；点击按钮后，页面将平滑滚动回顶部。文章详细展示了如何创建按钮元素、设置样式及绑定滚动事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

window.operTop = function() {
	    var headerDom = '<div  class="zzc-guide-back" ><img style="height:50%; width:50%; margin:12px;" src="/img/111.png"></div>';
	    var node = document.createElement('div');
	    node.innerHTML = headerDom ;
	    $("#ly_78")[0].appendChild(node);
	    $(".zzc-guide-back").each(function() {
	        $(this).css("width", "50px");
	        $(this).css("height", "50px");
	        $(this).css("border-radius", "28px");
	        $(this).css("border", "1px solid #D6DDE5");
	        $(this).css("margin-top", "10px");
	        $(this).css("right", "50px");
	        $(this).css("bottom", "50px");
	        $(this).css("zIndex", "999999");
	        $(this).css("cursor", "pointer");
	        $(this).css("position", "fixed");
	        $(this).css("background-color", "#fff");
	        $(this).css("display", "none");
	    });
	    //滚动到顶部按钮
	    document.querySelector('.zzc-guide-back').addEventListener('click',
	    function() {
	        $('html').animate({
	            scrollTop: 0
	        },
	        600)
	    });

		window.addEventListener('scroll',function(){
		  //执行操作
		  onscroll();
});
	}

/**
 * 滚动事件 
 */
window.onscroll = function(){
    // 滚动高度
    var height = document.documentElement.scrollTop || document.body.scrollTop;
    // 滚动高度大于200显示按钮,否则隐藏
    if(height >= 200){
        $('.zzc-guide-back').css("display", "block");
    }else{
        $('.zzc-guide-back').css("display", "none");
    }	
}