导航栏滚动监听

PROMULGATOR

有花不见叶

北京市

← chatroom聊天室

→ js向左翻动切换图片

相关代码

Html

Css


    
        第一章
        第二章
        第三章
        第四章
    


    
        第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章第一章
    
    
        第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章第二章
    
    
        第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章第三章
    
    
        第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章第四章

 * {
	margin:0;
	padding:0;
}
nav {
	position:fixed;
	width:100%;
	height:60px;
	line-height:60px;
	background:#f0f0f0;
	z-index:999;
}
ul {
	overflow:auto;
	margin-left:30px;
}
ul li {
	float:left;
	list-style:none;
	margin:0 20px;
}
ul li a {
	color:black;
	text-decoration:none;
	cursor:pointer;
}
div {
	height:500px;
	margin:0 0 0 50px;
	position:relative;
	top:90px;
}
.action {
	color:red;
}

}
}

window.onload = function() {
    for (var i = 0; i < list.length; i++) {
        list[i].id = i;
        list[i].onclick = function() {
            var v = document.body.scrollTop;
            var hope = show_h * this.id;
            duration = hope - v; //距离差值
            var scrollCount = 1000 / 10; //滚动次数，一秒滚动100次
            var everyDistance = duration / scrollCount /*滚动距离除以滚动次数计算每次滚动距离*/
            for (var i = 0; i < scrollCount; i++) {
                setTimeout(function() {
                    window.scrollBy(0, everyDistance)
                }, 10 * i)
            }

}
    }

}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

导航栏滚动监听



代码描述：js代码，实现导航栏的滚动监听，类似锚点链接，使其产生动画效果

原生js效果实现类似于滚动监听，类似于锚点链接，但是产生了动画的效果

1

最新

发表评论全部评论

暂时没有评论！

罄?一瞥0

2017/8/28 17:28:41

小bug 点击“第二章”后，“第一章”变红色，以此类推！
回复

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>导航栏滚动监听-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号