スムーズスクロールについて

403 views
  1. コメントする
  2. 記事検索
  3. 更新
  4. 凍結

0
とく Chrome 2018/12/06 00:11
headについての質問です。
#リンクを押すと、アンカーポイントまでぬるぬるスクロールするスムーズスクロールを使用したいのですが、上手くできません。
headはテンプレサイト様のものをカラーコード以外はそのまま使用しています。
恐らく問題点は<script type=〜だろうと自分でも調べてみたのですが、どうにも問題点がわからず、お手数お掛けいたしますが解決方法がわかる方がいらっしゃいましたらご教授いただきたいです。

レスに続きます。

残り997件書き込み可

3
しち Firefox 2018/12/14 20:22
>>1
>>スムーズスクロールがうまくできない
アンカーリンク自体は機能しているけれど、ぬるっとスクロールしてくれないということでよろしいですか?
それでしたら、<script type="text/javascript"……>の一行を、↓に書き換えれば多分ぬるぬる動くようになります。


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


ちなみに「http://」だったところを「https://」に変えただけです。
なおjQueryに限らず、Webフォントを埋め込むURLに関しても「https://…」にしないとフォントが変わりません。(>>1を見ると、Webフォントの方はhttps://になってますから正常に表示されているかと思います)

ざっくり雑に説明すると、ALICE+さんでWebフォントやjQueryを設置するときは「http://……」のアドレスになってると機能しません。よって、
#「https://……」にするか、
#http:を削って「//ajax.googleapis…」や「//fonts.googleapis…」というふうに【//】以降のアドレスにする
……と覚えておけば概ね問題無いです。雑ですみません。
理屈に関しては過去スレにあります。
http://bbs.alicex.jp/support/166/「https化に伴うデザイン崩れ」
(上記の、>>4さんのお話がそれです)


((個人的な感想としては、原因箇所が不明な場合は疑わしい場所をすべて提示されていた方が、「間違い探し」をするだけなので楽な気がします。
jQueryが想定通り機能しない原因はscriptの誤り以外にも、htmlに問題があるとか、HEAD間CSSの文法ミスでページ全体おかしなことになってるとか、色々推測できるので……))

もしhttps://に書き換えても解決しない場合はhtmlに問題があるかと思いますので、【デザイン編集】の内容も書き込まれることをお勧めします。
2
通りすがり iPhone 2018/12/08 08:58
>>0
「上手くできません」の内容がわからない
何をやったのかも書きましょう
また、CSSの記述は関係ないので書かないことで回答がもらえる確率も上がると思う
質問者は回答者のことを考えて質問するとよいですよ

javascriptを使わない状態でページ内リンクは稼働してます?

1
とく Chrome 2018/12/06 00:11
---head---
<meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<link href="https://fonts.googleapis.com/css?family=Rajdhani" rel="stylesheet">
<style type="text/css"><!--
* {
padding: 0;
margin: 0;
font-family: 'メイリオ', 'Meiryo', sans-serif;
}
body {
color: #000;
background-color: #fff;
font-size: 13px;
text-align: justify;
word-break: break-all;
line-height: 1.7;
letter-spacing: 0.1em;
}
a, nav a {
color: #000;
transition: 1.0s;
text-decoration: none;
}
a:hover {
color: #fcea6b;
}
header {
background: url('##IMAGE_DATA_10_URL##') center/cover no-repeat #fcea6b;
height: 100vh;
}
header, nav, nav a, h1 {
color: #fff;
font-family: 'Rajdhani', sans-serif;
letter-spacing: 0.2em;
text-align: center;
}
header, nav, section, .mark {
margin: 0 auto;
}
header, nav {
width: 100%;
}
nav {
font-size: 1.5em;
background-color: rgba(0, 0, 0, 0.3);
line-height: 2;
bottom: 0;
height: 2.5em;
position: fixed;
z-index: 1;
}
section {
width: 80%;
max-width: 480px;
padding: 3em 0;
}
section a {
border-bottom: thin solid #fcea6b;
}
h1 {
font-size: 2.3em;
font-weight: normal;
line-height: 1;
border: 4px double #fff;
margin: 6em auto 3em;
padding: 0.5em 1em;
display: inline-block;
}
h2, h3 {
font-family: 'Rajdhani', sans-serif;
font-weight: normal;
text-indent: 0.1em;
}
h3 {
position: relative;
}
h3 span {
position: relative;
z-index: 2;
display: inline-block;
padding: 0 0.5em;
margin: 0 0.5em;
background-color: #fff;
}
h3::before {
position: absolute;
top: 50%;
z-index: 1;
content: '';
display: block;
width: 100%;
height: 1px;
border-top: thin dashed #000;
}
.center {
text-align: center;
margin-bottom: 1em;
}
.center img {
width: 60px;
height: auto;
}
p {
border: thin dashed #000;
width: 80%;
padding: 0.5em 1em;
margin: 1em auto;
}
span {
background-color: #fcea6b;
}
.mark {
width: 30px;
height: 30px;
border: 2px solid;
border-color: transparent transparent #fff #fff;
transform: rotate(-45deg);
}
textarea, input[type] {
color: #000;
background-color: #fff;
border: thin solid #000;
border-radius: 0;
-webkit-appearance: none;
-webkit-box-shadow: none;
}
input[type=text] {
width: 100px;
text-align: center;
}
input[type=submit] {
width: 50px;
}
textarea {
width: 200px;
height: 50px;
}
--></style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('a[href^=#]').click(function() {
var speed=700;
var href=$(this).attr("href");
var target=$(href=="#" || href=="" ? 'html': href);
var position=target.offset().top;
$("html, body").animate( {
scrollTop: position
}
, speed, "swing");
return false;
}
);
}
);
</script>
1ページ中1ページ目

関連スレッド

関連スレッド



Back to Top