当前位置：教热门 > 其他 > jquery+html+css坐标描点平滑滚动返回顶部和底部代码
教热门-官方教热门-官方 其他
同款下载

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>
<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>




<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>
<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>




<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>
<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>




<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>
<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>




<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>


修改说明：


    

  1. 代码中的jquery.js引用的是本站的链接，可不必修改，也可自行下载引用。
    2. 

  2. 修改class值的时候注意要和下面jquery的值对应，否则不会生效。
    3.

1. 本站所有资源来源于用户上传和网络，如有侵权请联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别！

教热门 » jquery+html+css坐标描点平滑滚动返回顶部和底部代码

教热门-官方 普通

分享到：

相关推荐

发表回复