質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1748閲覧

slicker使用部分で画像をクリックすると自動的に上にスクロールされる

kazoogon

総合スコア281

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/21 09:57

題名通りですがslicker使用部分の画像をクリックすると、勝手に上にスクロールされます。 複数ライブラリ使用が原因かと思っていますが、正直よくわかりません。。。

<!DOCTYPE html> <head> <meata lang="ja"> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="design.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inview/1.0.0/jquery.inview.min.js"></script> <!-- slickのライブラリ3つ↓ --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/> <link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/> <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> </script> --> </head> <body> <header> <div class="title">my country</div> <div class="navToggle"> <div> <span></span> <span></span> <span></span> </div> </div> <ul> <li><a href="#">Home</a></li> <li><a href="#">What is it?</a></li> <li><a href="#">Contact</a></li> <li><a href="#">twitter</a></li> </ul> </header> <div id="fullpage"> <div class="section"> <div class="main"> <h1>Sample</h1> <h2>Welcome to Sweden</h2> </div> </div> <div class="section"> <div class="main2"> <img src="https://unnoticeableme13.files.wordpress.com/2013/07/party-girls-fun-happy-sweden.jpg"> <div class="main2_explain"> <h1>You know about sweden?</h1> </div> </div> </div> <div class="section"> <div class="picture"> <img src="http://s3.amazonaws.com/iexplore_web/images/assets/000/006/463/original/sweden.jpg?1443530953"> <div class="pic_title">City view</div> </div> <div class="picture"> <img src="http://331mrnu3ylm2k3db3s1xd1hg.wpengine.netdna-cdn.com/wp-content/uploads/2015/06/Sprudge-FIKANYC-RobertWolcheck-FIKA_NYC_coffee_cup_detail-1.jpg"> <div class="pic_title">Fika</div> </div> <div class="picture"> <img src="http://blogg.forskolankarten.se/wp-content/uploads/2014/03/skogen.jpg"> <div class="pic_title">Utflykt</div> </div> </div> <div> <!-- ############# この画像をクリックすると、上にスクロールされる ############# --> <!-- 写真のスライド(slick使用) --> <!-- http://gimmicklog.main.jp/jquery/549/ 参照 --> <ul class="slider"> <li><a href="#"><img src="http://blogs.sweden.se/photo/files/2011/03/Sandwiches-at-Kulturhuset.jpg"></a></li> <li><a href="#"><img src="http://www.dreamhomestyle.com/wp-content/uploads/2014/10/modern-Swedish-crib-9.jpg"></a></li> <li><a href="#"><img src="http://football-uniform.up.n.seesaa.net/football-uniform/image/Sweden-12-UMBRO-women-home-kit-yellow-yellow-yellow-line-up.jpg?d=a0"></a></li> <li><a href="#"><img src="http://static5.businessinsider.com/image/4f19eb6beab8ea5b3600006a-1200/sweden-school.jpg"></a></li> <li><a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Koettbullar_stockholm2006.jpg/330px-Koettbullar_stockholm2006.jpg"></a></li> <li><a href="#"><img src="http://i.pinimg.com/600x/44/04/01/440401336f847048f1b3fc6c6b4eccca.jpg"></a></li> </ul> </div> </div> <script> $('.navToggle').on('click',function(){ $('header ul').toggleClass('showing'); //toggleは二回押すと元通りになる(on,offの機能) }); //スクロール後にヘッダーの幅狭める // http://www.webopixel.net/javascript/1037.html 参照 $(function(){ var header = $('header'); $(window).scroll(function(){ if($(window).scrollTop() > 50){ header.addClass('header_scrolled'); }else{ header.removeClass('header_scrolled'); } }) }); //https://memocarilog.info/jquery/6500 if(window.matchMedia('(max-width:780px)').matches){ $('header ul').css("top","128px"); $(window).scroll(function(){ if($(window).scrollTop() > 50){ $('header ul').css("top","64px"); }else{ $('header ul').css("top","128px"); } }) } / $(function(){ $('.picture').on('inview',function(event,isInView,visiblePartX,visiblePartY){ if(isInView){ $(this).stop().addClass('inview_picture'); }else{ $(this).stop().removeClass('inview_picture'); } }); }); $(function() { $('.slider').slick({ infinite: true, dots:true, slidesToShow: 3, slidesToScroll: 1, responsive: [{ breakpoint: 768, settings: { slidesToShow: 2, slidesToScroll: 1, } },{ breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1, } } ] }); }); </script> </body>
body{ padding:0; margin:0; } a{ text-decoration: none; } header{ position:fixed; top:0px; left:0px; width:100%; height:8em; background-color: #FA58D0; -webkit-transition: all 0.4s; -ms-transition: all 0.4s; -moz-transition: all 0.4s; -o-transition: all 0.4s; transition: all 0.4s; z-index:999; } .title{ font-size: 40px; color:white; font-family: arial black; position:absolute; left: 5%; top:50%; margin:auto; transform: translateY(-50%); } .navToggle{ display:none; position:absolute;/*bodyに対しての絶対位置指定*/ right:20px; top:0; bottom:0; margin:auto; width:30px; height:25px; cursor:pointer; border:solid 1px white; padding:5px 5px 0 5px; border-radius: 5px; } .navToggle div{ position: relative; } .navToggle span{ display:block; width:100%; border-bottom:solid 3px white; margin-bottom:5px; } header ul{ position:absolute; right:5%; top:0; bottom:0; margin:auto; display:table; -webkit-transition: max-height 0.4s; -ms-transition: max-height 0.4s; -moz-transition: max-height 0.4s; -o-transition: max-height 0.4s; transition: max-height 0.4s; } header ul li{ border-right:solid white 0.5px; color:black; display:table-cell; padding-right:10px; padding-left: 10px; font-size: 15px; cursor:pointer; } header ul li a{ color:black; } .header_scrolled{ height:4em; } @media screen and (max-width:780px){ .navToggle{ display:block; } .showing{ /*このクラスをjqueryでulに追加する*/ bottom:0; left:0; right:0; max-height:20em; } header ul{ max-height: 0; position:relative; /* topはjqueryで変える */ right:0px; display:block; width:100%; padding:0; overflow: hidden; background-color:rgba(0,0,0,0.8); } header ul li{ box-sizing:border-box; width:100%; padding:15px; display:block; text-align: center; border-bottom:solid 1px #777; } header ul li a { color:white; } } .main{ margin-top:128px; text-align: center; background: #FA58D0; color:white; width:100%; height:400px; } .main h1{ font-size: 100px; } .main h2{ font-size: 50px; } .main2{ height:400px; padding:40px; } .main2 img{ float:left; width:50%; } .main2_explain{ float:right; width:50%; text-align: center; } .main2_explain h1{ border-left: #FA58D0 solid 7px; margin-left: 20px; } .picture{ float:left; width:33.333%; opacity:0; transform: translate(0,40px); -webkit-transform: translate(0,40px); transition:0.8s; } .inview_picture{ opacity:1; margin-top: 40px; transform: translate(0,0); -webkit-transform: translate(0,0); } .picture img{ cursor: pointer; height:200px; display: block; margin:0 auto; transition: max-height 0.4s; } .picture img:hover{ opacity:0.8; } .pic_title{ text-align: center; font-size: 20px; font-family: arial-black; color:#777; font-weight: 700; padding-top: 20px; } @media screen and (max-width:780px){ .picture{ width:100%; margin:0 auto; margin-bottom: 20px; } .main2 img{ width:100%; } .main2_explain{ width:100%; } } /*スライドslick部分*/ /*左右の矢印の色を変える*/ .slider{ height:200px; overflow: hidden; } .slick-prev:before, .slick-next:before { color: #000; } .slick-next { right: 20px; z-index: 99; } .slick-prev { left: 15px; z-index: 100; } .slick-dots li.slick-active button:before, .slick-dots li button:before { color: #fff; } img { max-width: 100%; height: auto; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

html

1<a href="#">

と書くと一番上まで行ってしまうようです

javascript

1$("a").on("click",function(){ 2 if($(this).attr("href")=="#")return false; 3});

これでも入れておけば大丈夫かも

投稿2017/05/21 12:47

編集2017/05/21 12:49
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kazoogon

2017/05/22 12:59

ありがとうございます、上には行かなくなりました! しかしslickerが機能していないんですよね・・・・汗
退会済みユーザー

退会済みユーザー

2017/05/23 11:40

おてあげ・・・
guest

0

どれかプラグインの中で#を使っているんだと思うので他の値にすればいいのでは。
というかaタグを使っていないのならaタグを書いている意味が無いので書かなければOKみたいな^^

投稿2017/05/23 12:55

kyunta

総合スコア350

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問