0
私は同じインデックスファイル内に4ページありますが、そのうちの1ページだけがアクティブになっています。私は私のホームページに3つのリンクを持っています。ホームページのリンクをクリックすると、別のページの特定のdivにスクロールする必要があります。私はこれを実装しようとしましたが、特定のdivにスクロールする代わりに、セクションのみを表示しました。リンクをクリックしたときに別のセクションの特定の項目にスクロールする
A
答えて
1
あなたはdiv要素を持つセクションは、画面
2
の先頭にスクロールされたリンクをクリックしたときに、私はあなたがこのような何かを探していると思うjQueryの
$("#link").click(function(){ //id of the link which is being clicked
$('html, body').animate({
scrollTop: $("#div").offset().top //id of div to be scrolled
}, 1000);
});
を使用して、スニペットフルスクリーンで実行しては、とチェックは何が必要これです
body {
float: left;
width: 100%;
padding-bottom: 0px;
}
.common {
\t width: 100%;
\t float: left;
\t height: 100vh;
\t display: table;
}
.allbody {
\t float: left;
\t width: 100%;
}
a {
\t display: inline-block;
\t padding: 15px;
}
header {
\t float: left;
\t width: 100%;
\t position: fixed;
\t top: 0;
\t left: 0;
\t background: #fff;
}
.common h2 {
\t font-size: 30px;
\t color: #fff;
\t text-align: center;
\t padding-top: 10%;
\t display: table-cell;
\t vertical-align: middle;
}
#firstDestination {
\t background: #000;
}
#secondDestination {
\t background: #999;
}
#thirdDestination {
\t background: #ccc;
}
#fourthDestination {
\t background: #c1c1c1;
}<body>
<header>
\t <a href="#firstDestination">first page</a>
\t <a href="#secondDestination" >second page</a>
\t <a href="#thirdDestination">third page</a>
\t <a href="#fourthDestination">fourth page</a>
</header>
<div class="allbody">
\t <div class="common" id="firstDestination" ><h2>First Page</h2></div>
\t <div class="common" id="secondDestination"><h2>Second Page</h2></div>
\t <div class="common" id="thirdDestination" ><h2>Third Page</h2></div>
\t <div class="common" id="fourthDestination" ><h2>Fourth Page</h2></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function isElementInViewport (el) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}
// click-to-scroll behavior
$("a").click(function (e) {
e.preventDefault();
var section = this.href;
var sectionClean = section.substring(section.indexOf("#"));
$("html, body").animate({
scrollTop: $(sectionClean).offset().top
}, 1000, function() {
window.location.hash = sectionClean;
});
});
// listen for the scroll event
$(document).on("scroll", function() {
//console.log("onscroll event fired...");
// check if the anchor elements are visible
$(".common").each(function (idx, el) {
if (isElementInViewport(el)) {
// update the URL hash
if (window.history.pushState) {
var urlHash = "#" + $(el).attr("id");
\t \t \t window.history.pushState(null, null, urlHash);
}
}
});
});
</script>
0
jQuery.animate関数を使用し、scrolltopプロパティを使用できます。
私はあなたのための例を書きました。
$("#button").click(function() {
$('html, body').animate({
scrollTop: $("#myDiv").offset().top
}, 2000);
});.div {
min-height: 1100px;
background: red;
}
#myDiv {
height: 100px;
background: blue;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">button</div>
<div class="div">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search
for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search
for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search
for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum. It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has
a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search
for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). Contrary to popular belief, Lorem Ipsum is not simply random
text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a
Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero,
written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
</div>
<div id="myDiv"></div>関連する問題
- 1. リスト内の特定の項目にスクロールし、リスト内の次の特定の項目にスクロールします。
- 2. 特定の項目によってリストボックスの項目を識別
- 3. バインド後にロングリストセレクタ内の特定の項目にスクロールします。
- 4. 特定のdiv（jquery）にスクロールするリンクをクリックします
- 5. Silverlight 3 - TreeView：特定の項目へスクロール
- 6. JS/Jqueryを使用して特定の項目にスクロール
- 7. セクションをスクロールするとjQueryのハイライトメニュー項目
- 8. ウィンドウ上でJQueryでクラスの項目をスクロールし、特定の項目のスクロール機能を実行しますか？
- 9. ユーザーが特定のセクションにスクロールしたときにjQuery activate関数
- 10. 特定のセクションにスクロール移動
- 11. 別のタブのリスト項目をクリックするときにタブを選択する
- 12. リンクをクリックして別のセクションに情報を表示
- 13. DrawerLayoutスクロールがNavigationDrawerの最後の項目に配置されているときを特定します
- 14. UIWebView他のリンクがクリックされたときに上にスクロール
- 15. divの外をクリックしたときに項目を非表示にする
- 16. ドロップダウンの項目をクリックしたときにのみリストボックスを表示する
- 17. リストビューの項目をクリックしたときにリストビューのテキストに色を付けることができます。他の項目をクリックしたときに、前の項目がデフォルトの色になるはずです
- 18. リリーストグル効果別のリンクをクリックしたときに
- 19. Silverlightアプリケーションの特定のセクションへのリンク
- 20. 各配列項目を別々のリンクにする
- 21. クリックしたときにContextMenuStripの項目の横にアイコンを表示
- 22. 配列の特定の項目を末尾に置きます
- 23. 特定のセクションだけをUITableViewでスクロールできるようにする
- 24. recyclerviewのチェック項目と未チェック項目のセクションを追加する方法は？
- 25. メニュー項目をクリックしたときに別のフォーム内でフォームを表示する方法
- 26. 別の親メニュー項目をJQueryでクリックしたときにサブメニューを折りたたむ方法
- 27. クリックするとウィンドウ上部から特定の位置にスクロール
- 28. recyclerviewの項目をクリックしたときにビューページのフラグメントを開く方法
- 29. 別のページへのリンク - >特定のアンカーへのjqueryスクロール
- 30. ナビゲーションペインの項目をクリックしたときにJavaスクリプトメソッドを呼び出す方法
リンクのhref属性は、あなたがにスクロールしたいのdivのidを指している必要があります。 –
あなたはそれがスクロールして見ることができないので、スクロールしていないか、またはスクロールしていないという問題に関するご質問はありますか？ –
@jijishthomasあなたは答えをチェックしましたか？ –