EC-CUBE 開発コミュニティ

質問 > フロント機能 > [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の問題なので本などを読んで勉強することをおすすめします。。。 ---------------- EC-CUBEのカスタマイズ、トラブル解決承りますお気軽にお問い合わせ下さい https://www.ec-cube.net/integrate/partner/partner.php?partner_id=690

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 によるページング機能によって上手く動作しないのではないでしょうか。 ---------------- EC-CUBEのプラグインを公開しています！いつも reCAPTCHA

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様　お世話になっております。前回はったＵＲＬのほうは実装が容易にできましたが最初の質問時にはったＵＲＬのマウスでスクロールをさせるとボタンが出現し、クリックするとスムーズにトップに移動する jqueryを実装させたいと思っております。 http://tokkono.cute.coocan.jp/blog/slow/index.php/xhtmlcss/smart-scroll-to-top-button-using-jquery/ この場合どのファイルを編集すればいいのかまたは新たに新規ファイル、cssを作らなければいけないのかとても悩んでおります。なにかアドバイスがあればご教授願いたく存じます。

(1) 2 »