質問 > フロント機能 > [jQuery]スクロールしてトップへ戻るボタンの実装ができない |
フロント機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
sam2013 |
投稿日時: 2013/6/5 18:00
対応状況: −−−
|
長老 ![]() ![]() 登録日: 2013/5/20 居住地: 投稿: 152 |
[jQuery]スクロールしてトップへ戻るボタンの実装ができない [情報]
[EC-CUBE] 正式版(Ver2.12.3)新規インストール [レンタルサーバ] data-hotel.net [OS] windows7 [PHP] PHP Version 5.2.13 [データベース] MySQL 5.0.83 [WEBサーバ] Localhost via UNIX socket [ブラウザ]firefox,chrome お世話になっております。 この度スクロールするとトップへ戻るボタンが出てくるようなボタンを作りたくJqueryを使用して実装を試みまして どのブロックにこのコードを組み込めばいいかわからなく新たなブロックを作りました。 しかし以下のソースコードを作ってもスクロールしても表示されません。 もしかしたら全ページ共通の何かに以下のコードをいれるのでしょうか。 headerにいれてみたらバグが出ました。 ※参考URLページ 同じ悩みを抱えてるかたいらっしゃると思います。 初心者の質問で申し訳ございませんがご教授いただきたいです。 <head> <link rel="stylesheet" type="text/css" media="screen,projection" href="/html/user_data/packages/201305281/css/topreturn.css" charset="UTF-8" /> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script> $(document).ready(function(){ // hide #back-top first $("#back-top").hide(); // fade in #back-top $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 120) { $('#back-top').fadeIn(); } else if ($(this).scrollTop() < 80) { $('#back-top').fadeOut(); } }); // scroll body to 0px on click $('#back-top a').click(function () { $('body,html').animate({scrollTop: 0}, 'slow'); return false; }); }); }); </script> </head> <body> <div> <p id="back-top"> <a href="#"><span></span>Back To Top</a> </p> </div> </body> [CSS] #back-top { position: fixed; bottom: 30px; right: 30px; z-index: 9999; } #back-top a { width: 108px; display: block; text-align: center; font: 11px/100% Arial, Helvetica, sans-serif; text-transform: uppercase; text-decoration: none; outline: none; color: #bbb; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } #back-top a:hover { color: #000; filter: alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; } /* arrow icon (span tag) */ #back-top span { width: 108px; height: 108px; display: block; margin-bottom: 7px; background: #ddd url(up-arrow.png) no-repeat center center; /* rounded corners */ -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; /* transition */ -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; } #back-top a:hover span { background-color: #777; } |
red |
投稿日時: 2013/6/5 19:02
対応状況: −−−
|
神 ![]() ![]() 登録日: 2010/2/15 居住地: 東京都 投稿: 1571 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない EC-CUBEの問題ではなくhtmlとJSの問題なので本などを読んで勉強することをおすすめします。。。
|
sam2013 |
投稿日時: 2013/6/5 19:26
対応状況: −−−
|
長老 ![]() ![]() 登録日: 2013/5/20 居住地: 投稿: 152 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない red様
いつもお世話になっております これは新たにブロックを作成して作るものなのか デフォルトであるブロックに記載するものな気になっております。 全ページに適用させたいので後者なのかなと思っているのですが。。。 |
sam2013 |
投稿日時: 2013/6/5 20:31
対応状況: −−−
|
長老 ![]() ![]() 登録日: 2013/5/20 居住地: 投稿: 152 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない http://www.itoben.com/style/blog/389.html
上記サイトを参考に ■data/Smarty/templates/default/site_frame.tplに追加しましたがうまくいきませんでした <!--{printXMLDeclaration}--><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!--{* * This file is part of EC-CUBE * * Copyright(c) 2000-2012 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. *}--> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" class="<!--{$tpl_page_class_name|h}-->"> <head> <meta http-equiv="Content-Type" content="text/html; charset=<!--{$smarty.const.CHAR_CODE}-->" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="<!--{$TPL_URLPATH}-->css/import.css" type="text/css" media="all" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="<!--{$smarty.const.HTTP_URL}-->rss/<!--{$smarty.const.DIR_INDEX_PATH}-->" /> <!--{if $tpl_page_category == "abouts"}--> <!--{if ($smarty.server.HTTPS != "") && ($smarty.server.HTTPS != "off")}--> <script type="text/javascript" src="https://maps-api-ssl.google.com/maps/api/js?sensor=false"></script> <!--{else}--> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <!--{/if}--> <!--{/if}--> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/css.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/navi.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/win_op.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/site.js"></script> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery-1.4.2.min.js"></script> <title><!--{$arrSiteInfo.shop_name|h}--><!--{if $tpl_subtitle|strlen >= 1}--> / <!--{$tpl_subtitle|h}--><!--{elseif $tpl_title|strlen >= 1}--> / <!--{$tpl_title|h}--><!--{/if}--></title> <!--{if $arrPageLayout.author|strlen >= 1}--> <meta name="author" content="<!--{$arrPageLayout.author|h}-->" /> <!--{/if}--> <!--{if $arrPageLayout.description|strlen >= 1}--> <meta name="description" content="<!--{$arrPageLayout.description|h}-->" /> <!--{/if}--> <!--{if $arrPageLayout.keyword|strlen >= 1}--> <meta name="keywords" content="<!--{$arrPageLayout.keyword|h}-->" /> <!--{/if}--> <link rel="shortcut icon" href="<!--{$TPL_URLPATH}-->img/common/favicon.ico" /> <link rel="icon" type="image/vnd.microsoft.icon" href="<!--{$TPL_URLPATH}-->img/common/favicon.ico" /> <!--スムーズスクロール--> <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/dfsmoothscroll/smooth.pack.js"></script> <script type="text/javascript">//<![CDATA[ <!--{$tpl_javascript}--> $(function(){ <!--{$tpl_onload}--> }); //]]></script> <!--{* ▼Head COLUMN*}--> <!--{if $arrPageLayout.HeadNavi|@count > 0}--> <!--{* ▼上ナビ *}--> <!--{foreach key=HeadNaviKey item=HeadNaviItem from=$arrPageLayout.HeadNavi}--> <!--{* ▼<!--{$HeadNaviItem.bloc_name}--> ここから*}--> <!--{if $HeadNaviItem.php_path != ""}--> <!--{include_php file=$HeadNaviItem.php_path}--> <!--{else}--> <!--{include file=$HeadNaviItem.tpl_path}--> <!--{/if}--> <!--{* ▲<!--{$HeadNaviItem.bloc_name}--> ここまで*}--> <!--{/foreach}--> <!--{* ▲上ナビ *}--> <!--{/if}--> <!--{* ▲Head COLUMN*}--> </head> <!-- ▼BODY部 スタート --> <!--{include file='./site_main.tpl'}--> <!-- ▲BODY部 エンド --> </html> |
sumida |
投稿日時: 2013/6/5 22:24
対応状況: −−−
|
仙人 ![]() ![]() 登録日: 2013/2/10 居住地: 広島県呉市ときどき瀬戸内海 投稿: 641 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない 内容を理解していませんが、単純に
smooth.pack.js は、該当するところに入れているのでしょうか? |
pineray |
投稿日時: 2013/6/6 10:01
対応状況: −−−
|
長老 ![]() ![]() 登録日: 2006/9/9 居住地: 伊賀 投稿: 292 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない 該当部分のリンク先が「#」となっているので、jQuery Mobile によるページング機能によって上手く動作しないのではないでしょうか。
|
sam2013 |
投稿日時: 2013/6/7 16:11
対応状況: −−−
|
長老 ![]() ![]() 登録日: 2013/5/20 居住地: 投稿: 152 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない pineray様
ご対応ありがとうございます。 スクロールすると矢印が出てきてクリックするとトップに戻る という効果をつけるにはどの階層の何のフォルダを編集すればいいかがとても知りたいです。 それとも新しくそれ専用のページ、cssを作らなければいけないのか。 ご教授願いたいです |
sam2013 |
投稿日時: 2013/6/7 16:12
対応状況: −−−
|
長老 ![]() ![]() 登録日: 2013/5/20 居住地: 投稿: 152 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない sumida様
ご対応ありがとうございます。 スクロールすると矢印が出てきてクリックするとトップに戻る という効果をつけるにはどの階層の何のフォルダを編集すればいいかがとても知りたいです。 それとも新しくそれ専用のページ、cssを作らなければいけないのか。 ご教授願いたいです |
sumida |
投稿日時: 2013/6/7 21:11
対応状況: −−−
|
仙人 ![]() ![]() 登録日: 2013/2/10 居住地: 広島県呉市ときどき瀬戸内海 投稿: 641 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない どういった動作を予定しているのかはわかりませんが、
とりあえず、参考にされているサイトのとおりの変更を、 localにやってみました。 画面の最下部にある「このページの先頭へ」をクリックすると、 スムーズに移動しましたよ。 |
sam2013 |
投稿日時: 2013/6/10 11:56
対応状況: −−−
|
長老 ![]() ![]() 登録日: 2013/5/20 居住地: 投稿: 152 |
Re: [jQuery]スクロールしてトップへ戻るボタンの実装ができない sumida様
お世話になっております。 前回はったURLのほうは実装が容易にできましたが 最初の質問時にはったURLの マウスでスクロールをさせるとボタンが出現し、クリックするとスムーズにトップに移動する jqueryを実装させたいと思っております。 http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/smart-scroll-to-top-button-using-jquery/ この場合どのファイルを編集すればいいのか または新たに新規ファイル、cssを作らなければいけないのかとても悩んでおります。 なにかアドバイスがあればご教授願いたく存じます。 |
(1) 2 » |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |