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

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

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

レスに続きます。

残り997件書き込み可

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