锚点跳转滑动

最新推荐文章于 2022-07-11 14:14:27 发布

一梦醉殇

最新推荐文章于 2022-07-11 14:14:27 发布

阅读量518

点赞数

分类专栏： jquery特效

本文链接：https://blog.csdn.net/qq_37121733/article/details/79563888

版权

jquery特效专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{height: 100%;}
*{padding:0px;margin: 0px;}
a{text-decoration: none;}
.bar_nav ul{width: 500px;margin: 0px auto;}
.bar_nav ul li{list-style: none;float: left;margin: 5px 25px;text-align: center;}

.navheader{
height: 100px;
width: 100%;
background: #08A5E0;
box-shadow: 1px 1px 7px #999;
position: relative;
}

</style>
</head>
<body>
<a name="goback" id="goback"></a>
<div style="height: 100px;"></div>
<div style="width: 100%;height: 100px;">
<div id="bignav" class="bar_nav" style="width: 100%;height: 100px;background-color: #EA8F18;text-align: center;position: absolute;z-index: 99;left: 0;">
<h1>导航栏</h1>
<ul>
<li><a href="javascript:void(0)" onClick="jumpTo('#g1',600)">第一页</a></li>
<li><a href="javascript:void(0)" onClick="jumpTo('#g2',600)">第二页</a></li>
<li><a href="javascript:void(0)" onClick="jumpTo('#g3',600)">第三页</a></li>
<li><a href="javascript:void(0)" onClick="jumpTo('#g4',600)">第四页</a></li>
<li><a href="javascript:void(0)" onClick="jumpTo('#g5',600)">第五页</a></li>
</ul>
<div style="clear: both;"></div>
</div>
</div>

<div id="onepage" class="one_page" style="height: 900px;background-color: #318A0E;text-align: center;">
<a name="g1" id="g1"></a>
<h1>第一页</h1>
</div>
<div style="height: 500px;background-color: #1992EF;text-align: center;">
<a name="g2" id="g2"></a>
<h1>第二页</h1>
</div>
<div style="height: 800px;background-color: #318A0E;text-align: center;">
<a name="g3" id="g3"></a>
<h1>第三页</h1>
</div>
<div style="height: 200px;background-color: #1992EF;text-align: center;">
<a name="g4" id="g4"></a>
<h1>第四页</h1>
</div>
<div style="height: 600px;background-color: #318A0E;text-align: center;">
<a name="g5" id="g5"></a>
<h1>第五页</h1>
</div>
<div style="height: 900px;"></div>

<a href="javascript:void(0)" onClick="jumpTo('#goback',600)">
<div class="goback" style="position: fixed;right: 0px;top: 50%;width: 50px;height: 50px;text-align: center;line-height: 50px;background-color: #431212;color: #ffffff;font-size: 30px;">↑</div>
</a>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function jumpTo(id) {
$("html, body").animate({ scrollTop: $(id).offset().top -100 }, "slow");
return false;
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$(".bar_nav").capacityFixed();
});
</script>
<script type="text/javascript">
(function($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
var FixedFun = function(element) {
var top = opts.top;
element.css({
"top":top
});
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {

if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
element.find(".close-ico").click(function(event){
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt={
right : 0,
top:100
};
})(jQuery);

</script>
<script type="text/javascript">
$(this).scroll(function(){
var this_scrollTop = $(this).scrollTop();
if(this_scrollTop>1200 ){
$(".goback").fadeIn(600);

}
if(this_scrollTop<1200 ){
$(".goback").fadeOut(600);

}
});
</script>
</body>
</html>