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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

235閲覧

JSを使用して同じURL内で指定した箇所に瞬時にスクロールするようにしたい。

sunday_monday

総合スコア12

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/07/09 23:13

編集2019/07/10 03:19
<html> <head> <script> (function(){ var itemnum = jQuery("meta[property='appama:item_id']").attr("content"); i='<div id="speed_mess">'; i+='<a href="'+ location.href +'#fashion">ありがとうございます</a></div>', jQuery("#cate987item").append(i); }); </script> </head> <body> <div id="cate987item"> <div id="speed_mess">ありがとうございます</div> </div> <div id="×××"></div> ・ ・ <iframe>×××</iframe> <iframe>×××</iframe> ・ ・ <div id="fashion"> <div class="blouse">   <img src="×××"> <img src="×××"> <table>×××</table> </div> </div> ・ ・ ・ </body> </html>

JS初心者です。よろしくお願いします。

上記記載のJSですが、「#fashion」の中に「tabel」があります。

上記JSの場合、#fashionまではスクロールできますが、
tableの位置までスクロールできるようにしたいです。

よろしくお願いします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2019/07/09 23:32

初心者なら初心者マークをつけましょう
sunday_monday

2019/07/09 23:39

失礼しました! 初心者マークを付けました。
x_x

2019/07/10 00:24

内容が不明瞭ではないですか? 少なくともわたしには何をしたいのかさっぱりわかりません。
yambejp

2019/07/10 00:30

#fashion、.blouse、tabelの現状と、変更後の具体的な HTMLのイメージを提示してください
sunday_monday

2019/07/10 00:34

上記JSの場合、#speed_messをクリックすると、#fashionの場所まではうまく移動するのですが、#fashionの中にあるtableに#speed_messをクリックし移動させたいです。 うまく説明できてなかったら、すみません。
miyabi_takatsuk

2019/07/10 01:08 編集

移動というのが、何の目的を指しているのかさっぱりわからないです。 そうである以上、回答しようがありません。 移動とは要素の位置、座標を変えることですか? それとも要素自体の取得のことですか?
yambejp

2019/07/10 01:08 編集

整理してください ・#speed_messは動的に作ったdivで、初期処理で#cate987itemの中にいれている? ・#speed_mess自体をクリックすると#fashionのtableの中に移動したい?  →肝心のtableのどこに移動したいのかわからない
sunday_monday

2019/07/10 01:41

はい、#cate987itemの中にいれています。 同ページ内の中にある、#fashionのtableの位置まで移動?リンク?スクロールさせたいんです。 よろしくお願いします。
yambejp

2019/07/10 01:47

ちょっと勘違いしてました、そっちの移動ですね 回答つけておきました
m.ts10806

2019/07/10 02:17

コードはマークダウンのcode機能を利用してご提示ください(※どのような表示になるかは他の質問や回答を参考にしてください)
sunday_monday

2019/07/10 03:07

皆様、無知な私にご教示頂き、ありがとうございます。 また、何かありましたら、よろしくお願いします。
m.ts10806

2019/07/10 03:08

せめてコード部分だけでも調整しておいていただけますか? 意外と苦労する人が多いので早い段階で理解しておいたほうが良いです。
sunday_monday

2019/07/10 03:20

あまり使いなれてなくて、すみません。 codeを使用し、入力してみました。間違えないでしょうか?
m.ts10806

2019/07/10 03:22

問題ないと思います。 次は下記のように冒頭で言語名を入れると言語にあわせたハイライトもしてくれるので覚えておいてください。 ```html
sunday_monday

2019/07/10 03:46

良かったです。 ありがとございます。
guest

回答3

0

ノードを移動したいということではなくスクロールしたいということでしょうか?

jQuery

1 $('#speed_mess').on('click', function(event) { 2 $('#fashion table')[0].scrollIntoView(); 3 event.preventDefault(); 4 return false; 5 });

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

投稿2019/07/10 01:17

x_x

総合スコア13749

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

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

yambejp

2019/07/10 01:31

あー、そっちの移動かぁ・・・確かに
guest

0

tableにIDをつければいいのでは?

投稿2019/07/09 23:33

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

sunday_monday

2019/07/09 23:41

回答ありがとうございます。 それも良いと思うのですが、全ページを修正しなくてはいけなく、簡単な方法であればと思い、質問させて頂きました。 やはり難しいのでしょうか?
guest

0

ベストアンサー

javascript

1<style> 2.dummy{background-Color:gray;height:999px} 3</style> 4<script> 5$(function(){ 6 i='<div id="speed_mess">'; 7 i+='<a href="#" data-href="#fashion table">ありがとうございます</a></div>', 8 $("#cate987item").append($(i)); 9 $(document).on('click','[data-href]',function(e){ 10 e.preventDefault(); 11 $('html,body').animate({'scrollTop':$($(this).data('href')).offset().top},0); 12 //console.log($($(this).data('href')).offset().top); 13 }); 14}); 15</script> 16<div id="cate987item"></div> 17<div class="dummy">dummy</div> 18<div id="fashion"> 19<div class="blouse"> 20<img src="×××" height=100 width=100 alt="xxx"><br> 21<img src="×××" height=200 width=200 alt="xxx"><br> 22<table border> 23<tr><td>hoge</td></tr> 24</table> 25</div> 26</div> 27<div class="dummy">dummy</div>

投稿2019/07/10 01:45

yambejp

総合スコア114572

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

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

sunday_monday

2019/07/10 03:09

未だ解決には至っておりませんが、yambejpさんのJSを参考に色々と勉強していきたいと思います。 ありがとうございました!
yambejp

2019/07/10 03:15

すみません、私の回答は命題を勝手に拡張しちゃっています どうしても分からなかったり、命題の主旨と違って挙動が安定しない場合は この質問に追記いただくか、別途質問をたてて、問題箇所を指摘ください
sunday_monday

2019/07/10 03:26

優しいお言葉ありがとうございます。(涙) 色々調べて分からなかったらお聞きしたいと思います。 よろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問