うーん・・・

jqueryとJavaについて

解決済

質問者：匿さま
質問日時：2022/05/16 22:39
回答数：2件

はじめまして
https://coco-factory.jp/ugokuweb/move01/8-1-4/
↑のリンクの機能を実装したいのですが
記載されているJavaScriptを記述しても動きません
それどころかトップページにタグがそのまま出ます
なぜでしょうか？
初心者ですみません
コピーして貼り付ければ動くように書き直していただけますと助かります
よろしくお願い申し上げます

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： sukitaro
回答日時：2022/05/17 10:03

いちいち高さを計算させるのは、あまりやらない方が良いみたいです。

参考：
https://developer.mozilla.org/ja/docs/Web/API/In …

交差オブザーバーという方法だと、おそらく以下のような感じだと思います。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>top scroll</title>
<style>
#page-top a {
display: flex;
justify-content:center;
align-items:center;
background:#942D2F;
border-radius: 5px;
width: 60px;
height: 60px;
color: #fff;
text-align: center;
text-transform: uppercase;
text-decoration: none;
font-size:0.6rem;
transition:all 0.3s;
}
#page-top a:hover {
background: #777;
}
@media screen and (max-width:768px) {
#page-top a:hover {
background: #942D2F;
}
}
/*リンクを右下に固定*/
#page-top {
position: fixed;
right: 10px;
bottom: 10px;
z-index: 2;
/*はじめは非表示*/
opacity: 0;
transform: translateY(100px);
}
/*　上に上がる動き　*/
#page-top.UpMove {
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime {
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/*　下に下がる動き　*/
#page-top.DownMove {
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime {
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(100px);
}
}
/*== レイアウトのためのCSS ==*/
section {
padding: 50vh 20px;
}
section:nth-child(odd) {
background-color: #ddd;
}
</style>
</head>
<body>
<section>section 0</section>
<section>section 1</section>
<section>section 2</section>
<section>section 3</section>
<section>section 4</section>
<section>section 5</section>
<p id="page-top" class="hide-btn"><a href="#">Page Top</a></p>
<script>
let pageFlag = true;
const sections = [...document.querySelectorAll('section')];
const pageTop = entries => {
entries.forEach(entry => {
if(!entry.isIntersecting) return;
if(pageFlag) {
pageFlag = false;
return;
}
const idx = sections.indexOf(entry.target);
if(0 < idx && idx < 4) {
document.getElementById('page-top').classList.add('UpMove');
document.getElementById('page-top').classList.remove('DownMove');
}else{
document.getElementById('page-top').classList.add('DownMove');
document.getElementById('page-top').classList.remove('UpMove');
}
});
};
const options = {
root: null,
rootMargin: '-30% 0px',
threshold: 0
}
const observer = new IntersectionObserver(pageTop, options);
sections.forEach(section => {
observer.observe(section);
});
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

すみません今見ました！
そして試しにコピペしたら動作しました！ありがとうございます
当方が載せたサイトのソースはなぜ動かないのでしょうか？
記述が違うのですかね、、？

通報する

お礼日時：2022/05/19 22:29

参考程度に

No.1

回答者： fujillin
回答日時：2022/05/17 00:35

こんにちは

＞なぜでしょうか？
何をどうしているのかがまったく不明なので、ご質問文の情報だけからでは、『そうなるように実装（？）しているから』としかわかりようがありません。

＞コピーして貼り付ければ動くように書き直していただけますと助かります
ご提示のサイトの記述がそうなっています。

ちなみに、ご提示のサイトの書き方であれば、HTMLソース部分だけをまるっとコピペして、HTMLファイルとして保存すれば、それだけで、とりあえずは動作するような記述方法になっています。
（もちろん、CSS、SCRIPTとも自サイトに置いて実装するのが基本ですけれど・・）