0
私は何時間も何時間も私の問題に対する答えを探しています。レスポンシブメニューは右のdivにスクロールせず、代わりにページの先頭にスクロールします
私は、javascriptを使用して特定のdivにスクロールする簡単な応答のナビゲーションバーを配置しようとしています。
このナビゲーションバーは、ページの上部にあるときに問題なく動作します。問題は、ページ上の他の位置から自分のリンクをクリックしたときに、上にジャンプして特定のdivにスクロールしないことです。
divをスクロールするために使用するJS関数、ナビゲーションバーの書式設定、またはHTML構造に関する貧弱な知識に関連しているかどうかはわかりません。だからここに私が持っているすべてです。
注意：私は自分のJS関数をhtmlファイルの中に直接書き込んでいますので、すべてが少し乱雑になります。私は本当にここに誰かがまた
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
$(".current-item").click(function() {
$('html, body').animate({
scrollTop: $(".menu").offset().top
}, 2000);
});
$(".scrollfeat1").click(function() {
$('html, body').animate({
scrollTop: $(".feature1scroll").offset().top
}, 2000);
});
$(".scrollfeat2").click(function() {
$('html, body').animate({
scrollTop: $(".feature2scroll").offset().top
}, 2000);
});
$(".scrollfeat3").click(function() {
$('html, body').animate({
scrollTop: $(".feature3scroll").offset().top
}, 2000);
});
$(".scrollfeat4").click(function() {
$('html, body').animate({
scrollTop: $(".feature4scroll").offset().top
}, 2000);
});html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-color: white;
overflow: auto;
font-family: Geneva;
}
h1 {
font-size: 60px;
}
h2 {
font-size: 30px;
}
p {
color: #757575;
font-family: Geneva;
}
/*----- Toggle Button -----*/
.toggle-nav {
display: none;
}
/*----- Menu -----*/
@media screen and (min-width: 860px) {
.menu {
width: 100%;
padding: 5px 20px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
background: white;
position: fixed;
z-index: 1;
}
}
.menu ul {
display: inline-block;
}
.menu li {
margin: 0px 50px 0px 0px;
float: left;
list-style: none;
font-size: 17px;
}
.menu li:last-child {
margin-right: 0px;
}
.menu a {
color: black;
transition: color linear 0.15s;
text-decoration: none;
}
.menu a:hover,
.menu .current-item a {
text-decoration: none;
color: #46B1C9;
}
/*----- Responsive -----*/
@media screen and (max-width: 1150px) {
.wrap {
width: 90%;
}
}
@media screen and (max-width: 970px) {
.search-form input {
width: 120px;
}
}
@media screen and (max-width: 860px) {
.menu {
position: relative;
display: inline-block;
position: fixed;
}
.menu ul.active {
display: none;
}
.menu ul {
width: 100%;
position: absolute;
top: 120%;
left: 0px;
padding: 10px 18px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.15);
border-radius: 3px;
background: white;
}
.menu ul:after {
width: 0px;
height: 0px;
position: absolute;
top: 0%;
left: 22px;
content: '';
transform: translate(0%, -100%);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #303030;
}
.menu li {
margin: 5px 0px 5px 0px;
float: none;
display: block;
}
.menu a {
display: block;
}
.toggle-nav {
padding: 20px;
float: left;
display: inline-block;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
background: white;
color: #777;
font-size: 20px;
transition: color linear 0.15s;
}
.toggle-nav:hover,
.toggle-nav.active {
text-decoration: none;
color: #46B1C9;
}
}
#homediv {
display: inline-block;
text-align: center;
max-width: 250px;
margin-left: 20px;
margin-right: 20px;
}
#mainpager {
padding-top: 5%;
text-align: center;
}
#homeimg {
max-width: 200px;
}
.centergalleries {
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-top: 6%;
}
.divsfeature {
padding-left: 5%;
padding-top: 20px;
overflow: auto;
min-height: 500px;
background-color: white;
}
.alignindiv {
max-width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.textfeat {
width: 500px;
max-width: 90%;
margin-right: 8%;
}
.imagefeat {
width: 600px;
height: 400px;
max-width: 90%;
background-color: white;
margin-right: 5%;
margin-top: 30px;
background: url(http://i.imgur.com/zlEKIw2.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.positionbtn {
margin-top: 6%;
margin-bottom: 6%;
text-align: center;
}
.btnmenu {
border-radius: 10px;
text-decoration: none;
color: #757575;
position: relative;
display: inline-block;
text-align: center;
padding-left: 50px;
padding-right: 50px;
width: 400px;
max-width: 90%;
}
.btnmenu p {
font-size: 16px;
line-height: 0;
padding: 0;
}
.btnmenu:active {
transform: translate(0px, 2px);
-webkit-transform: translate(0px, 2px);
}
.blue {
background-color: transparent;
border: #757575;
border-style: solid;
border-width: 1px;
transition: background-color linear 0.2s;
}
.blue:hover {
border: #46B1C9;
border-style: solid;
border-width: 1px;
background-color: #46B1C9;
}
.blue:hover p {
color: white;
}
.footlign {
border-top: 1px solid grey;
opacity: 0.5;
margin-right: 5%;
margin-left: 5%;
margin-top: 20px;
margin-bottom: 5px;
}
.divfooter {
display: inline-block;
margin-left: 5%;
vertical-align: top;
line-height: 15px;
margin-bottom: 5%;
}
#logo123 {
max-height: 100px;
margin-top: 20px;
}
#copyright {
font-size: 12px;
text-align: center;
max-width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title></title>
<link rel="icon" href="">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item"><a href="#">Home</a>
</li>
<li><a href="#" class="scrollfeat1">Feature 1</a>
</li>
<li><a href="#" class="scrollfeat2">Feature 2</a>
</li>
<li><a href="#" class="scrollfeat3">Feature 3</a>
</li>
<li><a href="#" class="scrollfeat4">Feature 4</a>
</li>
<li><a href="registerdemo">Get a demo</a>
</li>
</ul>
<a class="toggle-nav" href="#">☰</a>
</nav>
<body>
<div>
<h1 id="mainpager">title of my new company<br>hello world</h1>
<div class="centergalleries">
<div id="homediv">
<img src="http://i.imgur.com/l1DSaeN.png" id="homeimg">
<h4>Feature 1</h4>
<p>We do that to do that and you got to love it.</p>
</div>
<div id="homediv">
<img src="http://i.imgur.com/l1DSaeN.png" id="homeimg">
<h4>Feature 1</h4>
<p>We do that to do that and you got to love it.</p>
</div>
<div id="homediv">
<img src="http://i.imgur.com/l1DSaeN.png" id="homeimg">
<h4>Feature 1</h4>
<p>We do that to do that and you got to love it.</p>
</div>
<div id="homediv">
<img src="http://i.imgur.com/l1DSaeN.png" id="homeimg">
<h4>Feature 1</h4>
<p>We do that to do that and you got to love it.</p>
</div>
</div>
<div class="positionbtn">
<button class="btnmenu blue">
<p>Click to get a demo</p>
</button>
</div>
</div>
<div class="feature1scroll">
<div class="divsfeature alignindiv">
<div class="imagefeat">
</div>
<div class="textfeat">
<h2>Feature 1</h2>
<p>The history of Latin poetry can be understood as the adaptation of Greek models. The verse comedies of Plautus are considered the earliest surviving examples of Latin literature and are estimated to have been composed around 205-184 BC. The start
of Latin literature is conventionally dated to the first performance of a play in verse by a Greek slave, Livius Andronicus, at Rome in 240 BC. Livius translated Greek New Comedy for Roman audiences, using meters that were basically those of
Greek drama, modified to the needs of Latin. His successors Plautus and Terence further refined the borrowings from the Greek stage and the prosody of their verse is substantially the same as for classical Latin verse.</p>
</div>
</div>
</div>
<div class="feature2scroll">
<div class="divsfeature alignindiv">
<div class="textfeat">
<h2>Feature 2</h2>
<p>The history of Latin poetry can be understood as the adaptation of Greek models. The verse comedies of Plautus are considered the earliest surviving examples of Latin literature and are estimated to have been composed around 205-184 BC. The start
of Latin literature is conventionally dated to the first performance of a play in verse by a Greek slave, Livius Andronicus, at Rome in 240 BC. Livius translated Greek New Comedy for Roman audiences, using meters that were basically those of
Greek drama, modified to the needs of Latin. His successors Plautus and Terence further refined the borrowings from the Greek stage and the prosody of their verse is substantially the same as for classical Latin verse.</p>
</div>
<div class="imagefeat">
</div>
</div>
</div>
<div class="feature3scroll">
<div class="divsfeature alignindiv">
<div class="imagefeat">
</div>
<div class="textfeat">
<h2>Feature 3</h2>
<p>The history of Latin poetry can be understood as the adaptation of Greek models. The verse comedies of Plautus are considered the earliest surviving examples of Latin literature and are estimated to have been composed around 205-184 BC. The start
of Latin literature is conventionally dated to the first performance of a play in verse by a Greek slave, Livius Andronicus, at Rome in 240 BC. Livius translated Greek New Comedy for Roman audiences, using meters that were basically those of
Greek drama, modified to the needs of Latin. His successors Plautus and Terence further refined the borrowings from the Greek stage and the prosody of their verse is substantially the same as for classical Latin verse.</p>
</div>
</div>
</div>
<div class="feature4scroll">
<div class="divsfeature alignindiv">
<div class="textfeat">
<h2>Feature 4</h2>
<p>The history of Latin poetry can be understood as the adaptation of Greek models. The verse comedies of Plautus are considered the earliest surviving examples of Latin literature and are estimated to have been composed around 205-184 BC. The start
of Latin literature is conventionally dated to the first performance of a play in verse by a Greek slave, Livius Andronicus, at Rome in 240 BC. Livius translated Greek New Comedy for Roman audiences, using meters that were basically those of
Greek drama, modified to the needs of Latin. His successors Plautus and Terence further refined the borrowings from the Greek stage and the prosody of their verse is substantially the same as for classical Latin verse.</p>
</div>
<div class="imagefeat">
</div>
</div>
</div>
<div class="footlign"></div>
</body>
<footer class="footerfoot">
<div class="divfooter">
<img src="http://i.imgur.com/zlEKIw2.jpg" id="logo123">
</div>
<div class="divfooter">
<h4>Features</h4>
<p>Feature 1</p>
<p>Feature 2</p>
<p>Feature 3</p>
<p>Feature 4</p>
</div>
<div class="divfooter">
<h4>Other pages</h4>
<p>Contact</p>
<p>About us</p>
<p>Get a demo</p>
</div>
<div id="copyright">
<p>© whatapage.ch 2016</p>
</div>
</footer>を助けることができることを願っています
、ここでそのコードのfiddle
jsのフィドルリンク –
にこのコードを与える混乱です...それからスニペットを作るためにしてみてください！そして、html文書の一般的な構造に関するいくつかの文書を読んでください。 – andreas
私たちがあなたにこれを手伝ってもらう前に、これをjsfiddleに変換する必要があります。 https://jsfiddle.net/ – JBartus