jquery+html+css坐标描点平滑滚动返回顶部和底部代码-易站站长网

效果演示:

HTML代码：

<script type="text/javascript" src="https://www.yizhanzzw.com/wp-content/themes/zibll/js/libs/jquery.min.js?ver=7.1"></script> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="zhengwen">正文</div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo bottom"></div> 
<div class="location"> 
<p class="dingbutop">滑倒顶部</p> 
<p class="chanpin">产品介绍</p> 
<p class="dibu">滑到底部</p> 
</div>

CSS代码：

<style> 
.demo{ height:200px; width:100%; background:#55aaff; margin:10px 0;} 
.location{ position:fixed; right:0; bottom:10px; width:60px; background:#0055ff; padding:5px; cursor:pointer;color:#ffffff}; 
</style>

jquery代码：

<script type="text/javascript"> 
jQuery(document).ready(
    function($){ 
		$(window).load(function(){
        $('.dingbutop').click(
            function(){
                $('html,body').animate({scrollTop: '0px'}, 1000);//数字越大滑动越慢
            }); 
            $('.chanpin').click(function(){$('html,body').animate({scrollTop:$('.zhengwen').offset().top}, 1000);//数字越大滚动动越慢
    }); 
$('.dibu').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 1000);}); }); //数字越大滑动越慢
 }); 
</script>

完整代码：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js平滑滚动到描点指定地方+返回顶部返回底部</title> 
<script type="text/javascript" src="https://www.yizhanzzw.com/wp-content/themes/zibll/js/libs/jquery.min.js?ver=7.1"></script> 
<style> 
.demo{ height:200px; width:100%; background:#55aaff; margin:10px 0;} 
.location{ position:fixed; right:0; bottom:10px; width:60px; background:#0055ff; padding:5px; cursor:pointer;color:#ffffff}; 
</style> 
</head> 
<body> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="zhengwen">正文</div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo"></div> 
<div class="demo bottom"></div> 
<div class="location"> 
<p class="dingbutop">滑倒顶部</p> 
<p class="chanpin">产品介绍</p> 
<p class="dibu">滑到底部</p> 
</div> 
<script type="text/javascript"> 
jQuery(document).ready(
    function($){ 
		$(window).load(function(){
        $('.dingbutop').click(
            function(){
                $('html,body').animate({scrollTop: '0px'}, 1000);//数字越大滑动越慢
            }); 
            $('.chanpin').click(function(){$('html,body').animate({scrollTop:$('.zhengwen').offset().top}, 1000);//数字越大滚动动越慢
    }); 
$('.dibu').click(function(){$('html,body').animate({scrollTop:$('.bottom').offset().top}, 1000);}); }); //数字越大滑动越慢
 }); 
</script> 
</body> 
</html>