先日回答したメニューバーで現在のページをハイライトさせたいに近いかもしれません
改良版
スクロール時のアニメーションがほしいとのことなので、一部改良版を上げておきます
(スクロールがみやすくなるよう背景色をつけてあります)
javascript
1<html>
2<head>
3<style>
4#menu-wrap {
5 position: fixed;
6}
7#menu{
8text-align: left;
9 display: flex;
10margin: 0px;
11 padding-left: 20px;
12}
13#menu li {
14 display:inline;
15}
16#menu li:last-child a{
17 border-right:1px solid #000000;
18}
19#menu a:hover{
20 background-Color:yellow;
21}
22#menu a{
23 width: 80px;
24 border:1px solid #000000;
25 border-right:0px;
26 padding-left: 5px;
27 padding-right: 5px;
28 display: inline-block;
29 text-decoration:none;
30}
31.contents {
32 height: 500px;
33}
34.active {
35 background-color: red;
36}
37#content_first,#content_third,#content_etc{background-Color:aqua;}
38#content_second,#content_fourth{background-Color:lime;}
39
40</style>
41<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
42<script>
43$(function() {
44 var list=[];
45 ['#content_first',
46 '#content_second',
47 '#content_third',
48 '#content_fourth',
49 '#content_etc'
50 ].map(function(x){
51 list.push({
52 "min": $(x).offset().top,
53 "max": $(x).next().length>0?$(x).next().offset().top-1:($(x).offset().top+$(x).height()),
54 "id": x,
55 })});
56 var pre_pos = 0;
57 $(function() {
58 $('#menu a[href="' + location.hash + '"]').addClass('active');
59 $('#menu a').on('click', function() {
60 $('#menu a').removeClass('active');
61 $(this).addClass('active');
62 $('html,body').animate({scrollTop:$($(this).attr("href")).offset().top }, 500, 'swing');
63 });
64 });
65
66 $(document).on('scroll', function() {
67 var this_pos = $(window).scrollTop();
68 var pre_id = get_id(pre_pos);
69 var this_id = get_id(this_pos);
70 if (pre_id !== this_id) {
71 if(this_id!==null){
72 location.hash=this_id.substr(1,this_id.length);
73 $(window).scrollTop(this_pos);
74 }else{
75 location.hash="";
76 };
77 $('#menu a').removeClass("active");
78 $('[href="' + this_id + '"]').addClass("active");
79 }
80 pre_pos = this_pos;
81 });
82 function get_id(pos) {
83 var arr = list.filter(function(x) {
84 return x.min <= pos && x.max >= pos;
85 });
86 if (typeof arr[0] == "undefined") return null;
87 return arr[0].id;
88 }
89});
90</script>
91</head>
92<body>
93<nav id="menu-wrap">
94 <ul id="menu">
95 <li><a href="#content_first">Contents1</a></li>
96 <li><a href="#content_second">Contents2</a></li>
97 <li><a href="#content_third">Contents3</a></li>
98 <li><a href="#content_fourth">Contents4</a></li>
99 <li><a href="#content_etc">Contents5</a></li>
100 </ul>
101</nav>
102<div class="contents" id="content_first">1</div>
103<div class="contents" id="content_second">2</div>
104<div class="contents" id="content_third">3</div>
105<div class="contents" id="content_fourth">4</div>
106<div class="contents" id="content_etc">5</div>
107</body>
108</html>
クリックしたところを必ずアクティブにする
javascript
1<html>
2<head>
3<style>
4#menu-wrap {
5 position: fixed;
6}
7#menu{
8text-align: left;
9 display: flex;
10margin: 0px;
11 padding-left: 20px;
12}
13#menu li {
14 display:inline;
15}
16#menu li:last-child a{
17 border-right:1px solid #000000;
18}
19#menu a:hover{
20 background-Color:yellow;
21}
22#menu a{
23 width: 80px;
24 border:1px solid #000000;
25 border-right:0px;
26 padding-left: 5px;
27 padding-right: 5px;
28 display: inline-block;
29 text-decoration:none;
30}
31.contents {
32 height: 500px;
33}
34.active {
35 background-color: red;
36}
37#content_first,#content_third,#content_etc{background-Color:aqua;}
38#content_second,#content_fourth{background-Color:lime;}
39
40</style>
41<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
42<script>
43$(function() {
44 var list=[];
45 ['#content_first',
46 '#content_second',
47 '#content_third',
48 '#content_fourth',
49 '#content_etc'
50 ].map(function(x){
51 list.push({
52 "min": $(x).offset().top,
53 "max": $(x).next().length>0?$(x).next().offset().top-1:($(x).offset().top+$(x).height()),
54 "id": x,
55 })});
56 var pre_pos = 0;
57 $(function() {
58 $('#menu a[href="' + location.hash + '"]').addClass('active');
59 $('#menu a').on('click', function(e) {
60 e.preventDefault();
61 var me=$(this);
62 $.when($('html,body').animate({scrollTop:$($(this).attr("href")).offset().top }, 500, 'swing')).done(function(){
63 $('#menu a').removeClass('active');
64 me.addClass('active');
65 location.href=me.attr('href');
66 });
67 });
68 });
69
70 $(document).on('scroll', function() {
71 var this_pos = $(window).scrollTop();
72 var pre_id = get_id(pre_pos);
73 var this_id = get_id(this_pos);
74 if (pre_id !== this_id) {
75 if(this_id!==null){
76 location.hash=this_id.substr(1,this_id.length);
77 $(window).scrollTop(this_pos);
78 }else{
79 location.hash="";
80 };
81 $('#menu a').removeClass("active");
82 $('[href="' + this_id + '"]').addClass("active");
83 }
84 pre_pos = this_pos;
85 });
86 function get_id(pos) {
87 var arr = list.filter(function(x) {
88 return x.min <= pos && x.max >= pos;
89 });
90 if (typeof arr[0] == "undefined") return null;
91 return arr[0].id;
92 }
93});
94</script>
95</head>
96<body>
97<nav id="menu-wrap">
98 <ul id="menu">
99 <li><a href="#content_first">Contents1</a></li>
100 <li><a href="#content_second">Contents2</a></li>
101 <li><a href="#content_third">Contents3</a></li>
102 <li><a href="#content_fourth">Contents4</a></li>
103 <li><a href="#content_etc">Contents5</a></li>
104 </ul>
105</nav>
106<div class="contents" id="content_first">1</div>
107<div class="contents" id="content_second">2</div>
108<div class="contents" id="content_third">3</div>
109<div class="contents" id="content_fourth">4</div>
110<div class="contents" id="content_etc">5</div>
111</body>
112</html>