0
私は現在、コーディングスクールのアプリケーション用に1ページのWebサイトを構築しています。私はほぼそこにいますが、昨日以来、HTMLコードに入れた外部のハイパーテキストリンクは機能しません。それまでは完璧に動作していましたが、今はクリックできません。コードがどうやって間違っているか分かりません。アンカーがもう機能しない理由
内部アンカー（ページの別の部分に移動するナビゲーションバーの項目）はうまくいきますが、他のウェブサイトにつながる外部リンクには問題があります。アンカーは、NGO（WWF、シーシェパード、グリーンピース）のイメージです。私はそこから彼らのウェブサイトに行くことができていました。
プロジェクトは3月12日に予定されているので、どんな助力も大歓迎です！ 大変ありがとうございました！
スニペットは：
$(document).ready(function() {
$('.js-scrollTo').on('click', function() {
var page = $(this).attr('href');
var speed = 750;
$('html, body').animate({
scrollTop: $(page).offset().top
}, speed);
return false;
});
});
$(document).ready(function() {
$('body').append('<a href="#top" class="top_link" title="Revenir en haut de page">Haut</a>');
});
$('.top_link').css({
'position': 'fixed',
'right': '20px',
'bottom': '50px',
'display': 'none',
'padding': '20px',
'background': '#fff',
'-moz-border-radius': '40px',
'-webkit-border-radius': '40px',
'border-radius': '40px',
'opacity': '0.9',
'z-index': '2000'
});
$(window).scroll(function() {
posScroll = $(document).scrollTop();
if (posScroll >= 550)
$('.top_link').fadeIn(600);
else
$('.top_link').fadeOut(600);
});@font-face {
font-family: 'Old Standard TT';
src: url(OldStandard-Regular.ttf);
}
@font-face {
font-family: 'Bahiana-Regular';
src: url(Bahiana-Regular.otf);
}
header {
background-image: url("http://imageshack.com/a/img924/6688/ocZGBh.jpg");
background-size: cover;
min-height: 515px;
background-repeat: no-repeat;
background-position: center;
padding-top: 70px;
margin: auto;
}
nav {
width: 100%;
position: fixed;
height: 100%;
}
nav ul {
width: inherit;
display: table;
margin-top: 0px;
background-color: white;
float: left;
margin: 100%, auto;
}
nav ul li {
display: table-cell;
width: 16%;
}
ul li a {
display: block;
text-align: center;
color: rgba(0, 0, 0, .7);
text-decoration: none;
padding: 8px 8px 17px 8px;
font-family: 'Bahiana';
font-size: 25px;
}
body {
background-color: #DFDFDD;
margin: 0px;
}
h1 {
font-family: 'Old Standard TT', serif;
font-size: 25px;
color: #9e9c9c;
text-align: center;
margin-top: 15px;
}
h2 {
font-family: 'Old Standard TT', serif;
font-size: 30px;
color: #77D9D2;
text-align: center;
margin-left: 300px;
margin-right: 300px;
}
h3 {
font-family: "Old Standard TT", serif;
font-size: 20px;
color: #77D9D2;
}
section {
margin-top: 100px;
margin-bottom: 200px;
}
.pres,
.his,
.support {
text-align: center;
margin-left: 300px;
margin-right: 300px;
font-size: 20px;
color: #9e9c9c;
font-family: "Helvetica", sans-serif;
}
.pres-large {
font-family: 'Old Standard TT', serif;
font-size: 25px;
color: #77D9D2;
}
.des {
padding: 10px;
font-size: 15px;
font-family: "Helvetica", sans-serif;
text-align: justify;
color: #5F6C70;
}
.row {
display: flex;
margin: 60px 0;
text-align: center;
}
.card {
background-color: white;
width: 80%;
height: 800px;
margin-top: 25px;
margin-bottom: 25px;
}
.card.card-left {
margin: 0 5% 0 15%;
}
.card.card-right {
margin: 0 15% 0 5%;
}
.photo {
width: 100%;
}
#his {
clear: both;
}
table {
margin: auto;
}
table,
th,
td {
border-style: hidden;
text-align: center;
font-size: 20px;
font-family: 'Bahiana', Helvetica, sans-serif;
color: #9e9c9c;
width: 80%;
table-layout: fixed;
}
td {
width: 100px;
}
.tickets {
color: #77D9D2;
}
#gp {
float: left;
width: 200px;
margin-top: 20px;
}
#ssh {
float: right;
width: 200px;
margin-top: 15px;
}
#wwf {
width: 200px;
margin-left: 50px;
}
.press {
font-size: 25px;
font-family: "Old Standard TT";
color: #5F6C70;
text-align: center;
margin-left: 300px;
margin-right: 300px;
}
.separation {
display: block;
margin-left: auto;
margin-right: auto;
}
footer {
font-family: "Bahiana";
text-align: center;
font-size: 30px;
color: rgba(0, 0, 0, .7);
background-color: white;
margin-bottom: 10px;
padding-bottom: 0px;
}<body>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<nav>
<ul>
<li id="nav-what"> <a class="js-scrollTo" href="#what">What is the Wild Circus</a></li>
<li id="nav-how"> <a class="js-scrollTo" href="#how">How does that work</a></li>
<li id="nav-history"> <a class="js-scrollTo" href="#his">History</a></li>
<li id="nav-tour"> <a class="js-scrollTo" href="#tour">Tour Dates</a></li>
<li id="nav-support"> <a class="js-scrollTo" href="#support">Support</a></li>
<li id="nav-press"> <a class="js-scrollTo" href="#press">Press</a></li>
</ul>
</nav>
<header>
<h1>
<img src="http://imageshack.com/a/img922/8683/f9lHHB.png"> <br>
Welcome to the most Amazing and Grandiloquent Sock Puppet show !!
</h1>
</header>
<section id="what">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>WHAT IS THE WILD CIRCUS?</h2>
<div class="pres">
<p>Did you know that because of Climate changing, the northpole ice floe is melting away a bit more every year and it gives polar bears a hard time to find food? <br>
<br>
Did you know that because of deforestation, Apes don’t know where to live anymore ? <br>
<br>
Times are quite hard for our furry friends, right now…But don’t feel sorry or helpless, there’s still a lot of stuff we can do to help them out !
</p>
<p class="pres-large">Oscar the Polar Bear, Maurice the Orang-utan, Freddy the Sloth and many more of their friends are waiting for you to show you where and how they live and why it’s important to keep them in their natural habitat. They will show you all the things you can do to help ! <br>
The wild Circus is an educationnal and entertaining way to discover some of the most endangered species of our world. Especially designed for kids, our shows bring you Orcas, Tucans, Polar Bears, Orangutans, sea turtles in their true environnement so you can discover how they live, why they are in danger and how to protect them. <br>
Through multiple funny and witty playlets, kids will learn facts and tips about wildlife and its preservation. We aim to bring knowledge and good times altogether. It’s a wonderful way to learn and have fun !
</p>
</div>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="how">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>HOW DOES IS WORK?</h2>
<div class="pres">
<p>The show is divided in several playlets. Each playlet covers a certain habitat, with multiple animals, each of them with a strong personnality the Kids will simply fall in love with them ! <br>
Every single animal is made of a giant sock and accessories and animated by one of our awesome puppet masters <br>
At the end of the show, kids will be able to meet them in person and ask any questions they want
</p>
</div>
<div class="row">
<div id="jungle" class="card card-left">
<h3>Welcome to the Jungle</h3>
<img class="photo" src="http://imageshack.com/a/img922/6589/OIQIpr.jpg">
<p class="des">Maurice the Orang-Utan, Stanley the Rhino and Krisha the Tigress are taking you to Sumatra Island. You will discover a beautiful, deep forest : the jungle. It’s currently dying from deforestation and so, all those gorgeous animals are losing their home. Let’s see what solution we can find to protect them</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
<div id="sea" class="card card-right">
<h3>Twenty thousands Leagues under the Sea</h3>
<img class="photo" src="http://imageshack.com/a/img921/111/Zr6ZHn.jpg">
<p class="des">Have you ever seen the clear waters of the great barrier reef, off the coast of Australia? Like in Pixar’s Finding Nemo, it’s a very colourful world with sea turtles, clownfishs, starfishs and corals. But overfishing and climate change are a threat to this paradise. On our trip to the Coral Triangle, we’ll meet Rita the Turtle, Cabo the clowfish and loads and loads of other fantastic creatures, so they can tell their story.</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
</div>
<div class="row">
<div id="santa" class="card card-left">
<h3>The Land of Santa</h3>
<img class="photo" src="http://imageshack.com/a/img924/1781/6fNY6c.jpg">
<p class="des">Temperatures in the Arctic are rising twice as fast as in the rest of the planet! When the ice melts, the sea level rises and polar bears like Oscar are having trouble finding food and a home. Plus, the pollution of waters by shipping traffic and drilling for petrol in this area is dramatically harmful for plankton, which is the basic food of tons of different sea creatures, like Bella the gigantic humpback whale. Santa’s not too happy about it and might even come and give us a hand to save those majestic mammals !</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
<div id="lung" class="card card-right">
<h3>The Lungs of the Planet</h3>
<img class="photo" src="http://imageshack.com/a/img922/1086/2ceBcx.jpg">
<p class="des">Last stop of our trip, but not least : The Amazon. The Amazon is the most gigantic, dense tropical forest called the Lung of the planet. It’s the home of one in ten known species on earth but also of many unnumbered undiscovered species of insects, monkeys, exotic birds. The Amazon is also the biggest victim of deforestation today and it is literally dying. And every animal even so tiny living there is dying with it. There is a clear link between the health of the Amazon and the health of the rest of the planet.<br>
The Amazon is gonna be our biggest stop cause there’s so much to see, so much to do. It is critical to preserve the tropical forest so we can promise a brighter future for Alvin the Spider Monkey, Freddy the Sloth, Mara the Tucan but also for every single living being on this planet, including you !<br>
Come on then, we’re waiting for you !!!
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</div>
</div>
</section>
<section id="his">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>HISTORY</h2>
<p class="his">The story of the Wild Circus begins in 2006 when Elena Woodward, a Oregon kindergarden teacher started discussing environnement issues with her class of 3 and 4 years olds. The kids reacted strongly, fully understanding and feeling the injustice of our world toward the wildlife. Elena resented the fact that somehow, the kids are the fiercest defenders of nature but most of the time they just don’t know what’s happening to it. With her brother Ethan, she had this crazy idea to create a place where Kids could learn about wild animals and their preservation in an educationnal and entertaining way. They wanted something clever but simple and fun. Their love of socks did the rest. And so was born the Wild Circus.
They started performing in schools in Oregon but then it just caught on fire, becoming this huge success we now know ! After touring the US and Canada in 2016, The Wild Circus is now coming to Europe to share their knowledge and good spirits !
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="tour">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>TOUR DATES</h2>
<table>
<tr>
<td>April 16</td>
<td>Birmingham</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 17</td>
<td>London</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 20</td>
<td>Glasgow</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 21</td>
<td>Dublin</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 24</td>
<td>Paris</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 26</td>
<td>Amsterdam</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 27</td>
<td>Copenhagen</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 29</td>
<td>Stockholm</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>April 31</td>
<td>Berlin</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 2</td>
<td>Frankfurt</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 3</td>
<td>Milano</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 4</td>
<td>Prague</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 5</td>
<td>Vienna</td>
<td class="tickets">Get Tickets</td>
</tr>
<tr>
<td>May 7</td>
<td>Madrid</td>
<td class="tickets">Get Tickets</td>
</tr>
</table>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="support">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>THEY SUPPORT US, WE SUPPORT THEM!</h2>
<p class="support">
There's a lot of NGO that help preserving wildlife on an everyday basis. We love them and we know how important and crucial their job is. 10% of the tickets fare is going to them so they keep going protecting what's most treasurable on earth! Don't hesitate to support them too! You can meet them at the end of the show as they tour with us most of the time. If you want to donate or learn more about them and their work, here's their website links:<br>
<a href="http://www.greenpeace.org/international/en/"><img src="https://cupom.com/wp-content/uploads/sites/12/2012/12/greenpeace-logo-e1356599879308.jpeg" id="gp"></a> <br>
<a href="http://www.seashepherd.org/"><img src="https://totallyvegan.files.wordpress.com/2011/02/sea_shepherd.jpg" id="ssh"> </a> <br>
<a href="https://www.worldwildlife.org/"><img src="http://logok.org/wp-content/uploads/2014/08/WWF_logo-1024x768.png" id="wwf"></a> <br>
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<section id="press">
<img class="separation" src="http://imageshack.com/a/img924/1005/SQ06K9.png">
<h2>PRESS</h2>
<p class="press">
"If you haven't seen this already, rush before it's too late. It's clever, witty and hilarious!" <i>-The independent-</i><br>
"Nature is calling for help in the smartest kid show to date. Go for it and bring your kids, siblings, nephews... The planet thanks you" <i>-Vanity Fair-</i><br>
"Best. Show. Ever!!!" <i>-The New York Times-</i><br>
</p>
<img class="separation" src="http://imageshack.com/a/img924/2082/DjtUHh.png">
</section>
<footer>
<p>Eh! Wanna play a fun game while waiting to see the show? Go and check out <a href="http://www.robozzle.com/user.aspx?name=aaanoushka"> Robozzle </a></p>
</footer>
</body>
デバッグのヘルプを求める質問（「**なぜこのコードは動作しないのですか？**」）は、 希望の動作、特定の問題またはエラー、最短のコードを必要とします。 **質問自体に**再現してください。 **明確な問題のない質問 ステートメント**は、他の読者には役に立ちません。参照：[最小、完全、および 検証可能な例の作成方法]（http://stackoverflow.com/help/mcve） – j08691
うまくいかないリンクを右クリックし、 "inspect element"を選択します。どの要素がリンクの上にあるのかを示します。 – JJJ
_「それまでは完璧に動作しています」_まあ、何を変えましたか？それが問題の原因です... –