ボタンクリック時にコンテンツのトップまでスクロールしたい
左上にメニューを作って、特定の項目をクリックしたら、コンテンツのトップまでスクロールしていく内容を作りたいのですが、ボタンを押してもエラーが出てしまい、困っています。ご指摘いただきたいです。
また、簡潔に表示するために提案などがあれば勉強させていただきたいです。
お願いいたします。
左上のボタンを押した際にでたエラーです。
index.html:50 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLSpanElement. (index.html:50)
at HTMLSpanElement.dispatch (jquery.js:3)
at HTMLSpanElement.q.handle (jquery.js:3)
html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>jQuery</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="../../common/css/base.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
<div class="menu">
<span class="menu__btn" data-scroll-place-type="home">Home</span>
<span class="menu__btn" data-scroll-place-type="news">News</span>
<span class="menu__btn" data-scroll-place-type="about">About</span>
</div>
<div class="contents">
<p class="title" data-scroll-place-type="home">Home</p>
<p class="body">Lorem </p>
<p class="title" data-scroll-place-type="news">News</p>
<p class="body">Lorem </p>
<p class="title" data-scroll-place-type="about">About</p>
<p class="body">Lorem </p>
</div>
<span class="scrollTopBtn" style="display: none;"></span>
</div>
<script src="../../common/js/jquery.js"></script>
<script>
$(function() {
var Topicon = 100;
<エラー>
$('.menu__btn').on('click', function() {
var type = $(this).data('place');
var pol = $('title').eq(type).offset().top;
$('html,body').animate({ scrollTop:pol});
});
</エラー>
$(window).on('scroll', function() {
if($(window).scrollTop() >= Topicon) {
$('.scrollTopBtn').fadeIn();
} else {
if($(window).scrollTop() < Topicon) {
$('.scrollTopBtn').fadeOut();
}
}
});
$('.scrollTopBtn').on('click', function() {
$('html, body').animate({scrollTop:0});
});
});
</script>
</body>
</html>
</script>
css
.clearfix:after {
display: block;
clear: both;
content: '';
}
.wrapper {
padding: 20px;
}
.menu {
position: fixed;
top: 0;
left: 0;
font-size: 0;
}
.menu__btn {
display: inline-block;
padding: 10px 20px;
font-size: 14px;
background-color: #fff;
cursor: pointer;
}
.menu__btn + .menu__btn {
border-left: 1px #eee solid;
}
.contents {
padding: 10px;
margin: 100px auto;
width: 400px;
background-color: #fff;
}
.title {
padding-top: 10px;
margin: 0 0 20px;
font-size: 20px;
}
.scrollTopBtn {
position: fixed;
bottom: 10px;
right: 10px;
width: 40px;
height: 40px;
background-color: #fff;
cursor: pointer;
}
.scrollTopBtn:before {
position: fixed;
bottom: 18px;
right: 22px;
width: 15px;
height: 15px;
border-top: 4px #999 solid;
border-left: 4px #999 solid;
transform: rotate(45deg);
cursor: pointer;
content: '';
}