I'd like to create a menu in the upper left corner and click on a specific item to scroll to the top of the content, but I'm in trouble because I get an error when I press the button.I would like you to point it out.
Also, I would like to study if there are any suggestions in order to display them briefly.
Thank you.
The error occurred when I pressed the button in the upper left corner.
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>
<metacharset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scale=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="content">
<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;
<Error>
$('.menu__btn').on('click', function(){
var type = $(this).data('place');
varpol=$('title') .eq(type).offset().top;
$('html, body').animate({scrollTop:pol});
});
</Error>
$(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;
}
US>.menu{
position:fixed;
top:0;
left:0;
font-size:0;
}
.menu__btn{
display:inline-block;
padding —10px20px;
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 —00 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 (45 deg);
cursor —pointer;
content:';
}
var pol=$('title').eq(type).offset().top;
$('html, body').animate({scrollTop:'pol'});
The pol in appears in the variable.
{scrollTop:'pol'} and the pol variable in a single-quote format will result in a string.
I think the scrollTop argument requires a number, so isn't there an error by specifying a string there?
Try {scrollTop:'pol'} to {scrollTop:pol}.
From next time on, as Karamarimo said, please give me more detailed information such as error message details and screenshots.
It will take some time to find out.
-------------------------------------------------------------------- If you modify $('.menu__btn').on('click', function(){} to the following, it will work for now.
$('.menu__btn').on('click', function(){
var type = $(this).data('scroll-place-type');
// Check the elements of the title class in order (it was $('title') in the original code, and it was a selector to the title tag instead of the title class)
$('.title') .each(function(index,obj)
{
// Check if the element is being scrolled by the consistency of the data you own
if($(obj).data('scroll-place-type')===type)
{
// Get target element location information
varpol=$(obj).offset().top;
// Move the scroll to the target element position
$('html, body').animate({scrollTop:pol}); // take a single quarter of pol
// Target found, leaving the each() loop
return false;
}
})
});
The cause is
$('.title') .eq(type).offset().top
part of .
$('.title') .eq(type).offset()
The undefined was returned as of , causing an error because the undefined object does not have the top property.
Hello
var type=$(this).data('place'); is
var type = $(this).data('scroll-place-type'); then?However, I couldn't immediately think of a script to get the index number to be specified as .eq from the type value, so I did the following:
var index_menu_btn=$('.menu_btn').index(this);
varpol=$('.title') .eq(index_menu__btn).offset().top;
$(function(){
var Topicon=100;
$('.menu__btn').on('click', function(){
// var type = $(this).data('place');
var type = $(this).data('scroll-place-type');
var index_menu__btn=$('.menu__btn').index(this); // Added to get index number.
// varpol = $('.title') .eq(type).offset().top;
varpol=$('.title') .eq(index_menu__btn).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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="content">
<p class="title" data-scroll-place-type="home">Home</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p class="body">Lorem</p>
<br>
<br>
<br>
<br>
<p class="title" data-scroll-place-type="news">News</p>
<br>
<br>
<br>
<br>
<p class="body">Lorem</p>
<br>
<br>
<br>
<br>
<p class="title" data-scroll-place-type="about">About</p>
<p class="body">Lorem</p>
</div>
<span class="scrollTopBtn" style="display:none;">/span>
</div>
Also, for simplicity,
I added an id to html and fixed it to use type.
$(function(){
var Topicon=100;
$('.menu__btn').on('click', function(){
// var type = $(this).data('place');
var type = $(this).data('scroll-place-type');
// varpol = $('.title') .eq(type).offset().top;
varpol=$('#'+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 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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="content">
<pid="home" class="title" data-scroll-place-type="home">Home</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p class="body">Lorem</p>
<br>
<br>
<br>
<br>
<pid="news" class="title" data-scroll-place-type="news">News</p>
<br>
<br>
<br>
<br>
<p class="body">Lorem</p>
<br>
<br>
<br>
<br>
<pid="about" class="title" data-scroll-place-type="about">About</p>
<p class="body">Lorem</p>
</div>
<span class="scrollTopBtn" style="display:none;">/span>
</div>
© 2024 OneMinuteCode. All rights reserved.