首页 建站知识 源码分享 素材下载 经验分享

js+css实现点击平滑滚动到指定位置

发布时间:2019年08月09日 22:45:11

主要代码如下

HTML代码

<div class="show" style="background-color:#FFC;" id="show1">A1</div>
<div class="show" style="background-color:#D6FAC5;" id="show2">A2</div>
<div class="show" style="background-color:#CCF3FD;" id="show3">A3</div>
<div class="show" style="background-color:#FDDFEB;" id="show4">A4</div>

<div class="bottom"></div>

<div class="navstyle">
	<a id="top">返回顶部</a>
    <a id="nav1">A1</a>
    <a id="nav2">A2</a>
    <a id="nav3">A3</a>
    <a id="nav4">A4</a>
    <a id="bottom">返回底部</a>
</div>

JS代码

jQuery(document).ready(function($) {
    //返回顶部
	$('#top').click(function() {
        $('html,body').animate({
            scrollTop: '0px'
        },
        800);
    });
	$('#nav1').click(function() {
        $('html,body').animate({
            scrollTop: $('#show1').offset().top
        },
        800);
    });
	$('#nav2').click(function() {
        $('html,body').animate({
            scrollTop: $('#show2').offset().top
        },
        800);
    });
	$('#nav3').click(function() {
        $('html,body').animate({
            scrollTop: $('#show3').offset().top
        },
        800);
    });
	$('#nav4').click(function() {$('html,body').animate({scrollTop: $('#show4').offset().top},800);});

	//平滑到底部
    $('#bottom').click(function() {
        $('html,body').animate({
            scrollTop: $('.bottom').offset().top
        },
        800);
    });
});


.show{
	width:100%;
	height:800px;
	padding-top:20px;
	margin-bottom:20px;
	text-align:center;
	font-size:50px;
	color:#222;
}
.bottom{
	width:100%;
	height:200px;
	background-color:#333;
}
.navstyle{
	width:80px;
	height:auto;
	overflow:hidden;
	position:fixed;
	bottom:100px;
	right:20px;
}
.navstyle a{
	display:block;
	width:80px;
	height:40px;
	text-align:center;
	font:16px/40px 'microsoft yahei';
	margin:2px 0;
	color:#fff;
	background-color:#333;
	cursor:pointer;
}
jQuery(document).ready(function($) {
    //返回顶部
	$('#top').click(function() {
        $('html,body').animate({
            scrollTop: '0px'
        },
        800);
    });
	$('#nav1').click(function() {
        $('html,body').animate({
            scrollTop: $('#show1').offset().top
        },
        800);
    });
	$('#nav2').click(function() {
        $('html,body').animate({
            scrollTop: $('#show2').offset().top
        },
        800);
    });
	$('#nav3').click(function() {
        $('html,body').animate({
            scrollTop: $('#show3').offset().top
        },
        800);
    });
	$('#nav4').click(function() {$('html,body').animate({scrollTop: $('#show4').offset().top},800);});

	//平滑到底部
    $('#bottom').click(function() {
        $('html,body').animate({
            scrollTop: $('.bottom').offset().top
        },
        800);
    });
});
点赞
(0)|
收藏
(0)
|
纠错
浏览 57 次
发布时间:2019年08月09日 22:45:11 所属 javascript js+css实现点击平滑滚动到指定位置
js+css实现点击菜单分类平滑滚动到指定的分类位置以及返回顶部效果
javascript

推荐分享

热门