使用jquery animate实现锚点慢慢平滑滚动效果

采用锚点进行页面中的跳转的确很方便,但是由于没有过渡,太过生硬,目前主流都是平滑滚动效果,要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会会非常高大上。


滚动到顶部:

$('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});


滚动到指定位置:

$('.scroll_a').click(function(){$('html,body').animate({scrollTop:$('.a').offset().top}, 800);});


完整实例源码参考:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js平滑滚动到顶部、底部、指定地方</title>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box a">产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍产品介绍</div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box bottom"></div>
    <div class="location">
        <p class="scroll_top">返回顶部</p>
        <p class="scroll_a">产品介绍</p>
        <p class="scroll_bottom">滑到底部</p>
    </div>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        $('.scroll_top').click(function() {
            $('html,body').animate({
                scrollTop: '0px'
            }, 800);
        });
        $('.scroll_a').click(function() {
            $('html,body').animate({
                scrollTop: $('.a').offset().top
            }, 800);
        });
        $('.scroll_bottom').click(function() {
            $('html,body').animate({
                scrollTop: $('.bottom').offset().top
            }, 800);
        });
    });
    </script>
</body>
</html>


修改时间 2017-05-25

真诚赞赏,手留余香
赞赏
随机推荐
Filezilla Server和防火墙设置的相关知识(主动连接和被动连接)
Scoped Packages 范围包
line-height 属性
vue-router 切换页面时设置过渡动画
Linux 目录结构
近几年前端技术盘点以及 2016 年技术发展方向
babel-preset-env 一个就够了
cropper.js 剪切图片并上传的两种方式
Node.js实现的简单爬虫
macOS 文字转语音命令 say