所以，我制作了一个网页，最后我发现用户可能看不到有额外的信息，所以他必须向下滚动。我放了一个向下滚动按钮，它工作得很完美，只需要向下滚动才能看到它:)。如何在不滚动的情况下使我的向下滚动按钮可见？在任何屏幕分辨率上，按钮都是一个滚动。
<script>
/* this is the script for the button*/
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
</script>/*------------------here is the code for the button-----------------------------------------------------------------------------------------*/
html, body {
height: 100%;
}
section {
position: relative;
width: 100%;
height: 100%;
}
section::after {
position: absolute;
bottom: 0;
left: 0;
content: '';
width: 100%;
height: 80%;
}
.demo a {
position: absolute;
bottom: 20px;
left: 50%;
z-index: 2;
display: inline-block;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
color: black;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
}
.demo a:hover {
opacity: .5;
}
#section01 a {
padding-top: 60px;
}
#section01 a span {
position: absolute;
top: 0;
left: 50%;
width: 24px;
height: 24px;
margin-left: -12px;
border-left: 1px solid black;
border-bottom: 1px solid black;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
box-sizing: border-box;
}
/*------------------here is the code for the button-----------------------------------------------------------------------------------------*/
@font-face
{
font-family: FONT;
src: url(landing/Montserrat-Regular.ttf);
}
@font-face
{
font-family: FONT2;
src: url(home/Debby.ttf);
}
@font-face
{
font-family: FONT3;
src: url(home/Beautiful.ttf);
}
/*-------------------------------------------------FONT-URILE-------------------------------------------------------------------------------*/
/*body
{
margin: 0;
padding: 0;
}*/
* {
margin: 0;
padding: 0;
}
/*-------------------------------------------------BODY-UL----------------------------------------------------------------------------------*/
p.title1
{
font-size: 2.5em;
margin: 0;
}
div.surf1
{
background-position: center;
background-size: cover;
display: block;
background-image: url("landing/surf1.jpg");
height: 700px;
}
div.surf2
{
background: #41c3ac;
height: 600px;
}
div.surfleft
{
box-sizing: border-box;
padding-top: 70px;
padding-left: 50px;
float:left;
width: 50%;
height: 600px;
}
div.surfright
{
line-height: 600px;
text-align: center;
float: right;
width: 50%
}
div.surfright img
{
vertical-align:middle;
}
div.surf3
{
background: #ff6b57;
height: 600px;
}
div.surf4
{
background: #8C78B1;
height: 600px;
}
div.text1
{
padding-top: 100px;
color: white;
text-align:center;
font-size: 2.5em;
}
/*-------------------------------------------------PAGINA DE LANDING CU DIV-URI-------------------------------------------------------------*/
.button
{
text-align: center;
}
.button a, active
{
text-decoration: none;
background-color: rgba(236, 229, 167, 0.2);
border: 2px solid #e7dd84;
color: #e7dd84;
display: inline-block;
font-size: 1.5em;
padding: 8px;
transition: 0.35s;
}
.button a:hover
{
text-decoration: none;
background-color: white;
border-color: white;
color: black;
}
/*-------------------------------------------------BUTONUL DIN PAGINA DE LANDING------------------------------------------------------------*/
.slider {
display: block;
height: 600px;
min-width: 260px;
max-width: 1200px;
margin: auto;
margin-top: 10px;
position: relative;
}
.sliderinner {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.sliderinner>ul {
list-style: none;
height: 100%;
width: 700%;
overflow: hidden;
position: relative;
left: 0px;
-webkit-transition: left .5s cubic-bezier(.43,.44,.43,.44);
-moz-transition: left .5s cubic-bezier(.43,.44,.43,.44);
-o-transition: left .5s cubic-bezier(.43,.44,.43,.44);
transition: left .5s cubic-bezier(.43,.44,.43,.44);
}
.sliderinner>ul>li {
width: calc(100% / 7);
height: 600px;
float: left;
position: relative;
}
.sliderinner>ul>li>img {
margin: auto;
height: 100%;
max-width: 100%
}
.slider input[type=radio] {
position: absolute;
left: 50%;
bottom: 15px;
z-index: 100;
visibility: hidden;
}
.slider label {
position: absolute;
left: 50%;
bottom: -45px;
z-index: 100;
width: 12px;
height: 12px;
background-color: #ccc;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
cursor: pointer;
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
box-shadow: 0px 0px 3px rgba(0, 0, 0, .8);
-webkit-transition: background-color .2s;
-moz-transition: background-color .2s;
-o-transition: background-color .2s;
transition: background-color .2s;
}
.slider input[type=radio]#control1:checked~label[for=control1] {
background-color: #333;
}
.slider input[type=radio]#control2:checked~label[for=control2] {
background-color: #333;
}
.slider input[type=radio]#control3:checked~label[for=control3] {
background-color: #333;
}
.slider input[type=radio]#control4:checked~label[for=control4] {
background-color: #333;
}
.slider input[type=radio]#control5:checked~label[for=control5] {
background-color: #333;
}
.slider input[type=radio]#control6:checked~label[for=control6] {
background-color: #333;
}
.slider input[type=radio]#control7:checked~label[for=control7] {
background-color: #333;
}
.slider label[for=control1] {
margin-left: -54px
}
.slider label[for=control2] {
margin-left: -36px
}
.slider label[for=control3] {
margin-left: -18px
}
.slider label[for=control5] {
margin-left: 18px
}
.slider label[for=control6] {
margin-left: 36px
}
.slider label[for=control7] {
margin-left: 54px
}
.slider input[type=radio]#control1:checked~.sliderinner>ul {
left: 0
}
.slider input[type=radio]#control2:checked~.sliderinner>ul {
left: -100%
}
.slider input[type=radio]#control3:checked~.sliderinner>ul {
left: -200%
}
.slider input[type=radio]#control4:checked~.sliderinner>ul {
left: -300%
}
.slider input[type=radio]#control5:checked~.sliderinner>ul {
left: -400%
}
.slider input[type=radio]#control6:checked~.sliderinner>ul {
left: -500%
}
.slider input[type=radio]#control7:checked~.sliderinner>ul {
left: -600%
}
.description {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
font-family: Archivo Narrow;
z-index: 1000;
}
.description-text {
background-color: rgba(0, 0, 0, .8);
padding: 10px;
top: 0;
size: 55px;
font-family: FONT3;
font-size: 19px;
z-index: 4;
-webkit-transition: opacity .2s;
-moz-transition: opacity .2s;
-o-transition: opacity .2s;
transition: opacity .2s;
color: #fff;
}
p.Text-Slider {
color: #333;
font-size: 50px;
font-family: FONT2;
margin: 40px;
text-align: center;
}
/*-------------------------------------------------SLIDER-UL CU IMAGINI--------------------------------------------------------------------*/
#nav {
background-color: #e26a63;
padding: 0;
margin: 0;
font-family: FONT;
font-size: 20px;
}
#wrap {
padding-left: 60px;
height: 100px;
width: 100%;
margin: 0 auto;
display: table-cell;
vertical-align: bottom;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 225px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #cb5f59;
}
#nav ul li:after {
content: "";
font-size: 0;
display: block;
height: 5px;
}
#nav ul li:hover:after {
background: #9e4a45;
}
#nav ul ul li:hover:after {
background: transparent;
}
#nav ul li a, visited {
color: white;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background-color: #e26a63;
border-top: 0;
margin-top: 5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: white;
}
/*-------------------------------------------------MENIUL DROP-DOWN------------------------------------------------------------------------*/<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src='home/jquery-1.8.3.min.js'></script>
<script src='home/jquery.elevatezoom.js'></script>
<script>
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
</script>
</head>
<body style="background-image: url(home/background2.jpg);">
<div id="nav">
<div id="wrap">
<ul>
<li><a href="home.html">Home</a></li><li>
<a href="#">Study</a></li><li>
<a href="#">Games</a>
<ul>
<li><a href="#">Riddles</a></li><li>
<a href="#">Flip card game</a></li><li>
<a href="#">Spot the mistake</a></li><li>
<a href="#">Multiple choice</a></li>
</ul>
</li><li>
<a href="read.html">Read</a></li><li>
<a href="#">Contact</a></li><li>
<a href="about.html">About Us</a></li>
</ul>
</div>
</div>
<!--here is section 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 1 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
<section id="section01" class="demo">
<p class="Text-Slider">"Why Should I Learn English?" - 7 Compelling Reasons for EFL Learners</p>
<div class="slider">
<input type="radio" id="control1" name="controls" checked="checked"/>
<label for="control1"></label>
<input type="radio" id="control2" name="controls"/>
<label for="control2"></label>
<input type="radio" id="control3" name="controls"/>
<label for="control3"></label>
<input type="radio" id="control4" name="controls"/>
<label for="control4"></label>
<input type="radio" id="control5" name="controls"/>
<label for="control5"></label>
<input type="radio" id="control6" name="controls" />
<label for="control6"></label>
<input type="radio" id="control7" name="controls"/>
<label for="control7"></label>
<div class="sliderinner">
<ul>
<li>
<img src="home/image1.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English is one of the most widely spoken languages</h2>
<p>Although it comes second to Mandarin in the total number of speakers, English is the language you'll be able to use most widely, as it's spoken in more countries than any other language. That means that English is the language that will give you the best return for your efforts; after all, intellectual challenge aside, there's little point putting a huge amount of time and effort into learning a language that you'll hardly ever have the opportunity to use.</p>
<p>
As well as the UK, a whopping 60 of the world's 196 countries have English as their official language: the USA, Australia, Canada, New Zealand, to name but a few. It's the language of diplomacy and the official language of the European Union, the United Nations, NATO and the European Free Trade Association, not to mention many Commonwealth countries. What's more, English is the commonly adopted second language of people in a great many more countries, including Norway, Sweden, Denmark, Germany and Holland. In total, around 1.5 billion people speak English worldwide - and another billion are in the process of learning it. Will you make this number even bigger by learning it yourself?
</p>
</div>
</div>
</li>
<li>
<img src="home/image2.jpg" height="600px" width="1200">
<div class="description">
<div class="description-text">
<h2>English will open up more opportunities for you</h2>
<p>Being able to speak English allows you to communicate effectively in numerous countries, and this opens up lots of possibilities for you in terms of the countries you could choose to seek work in one day - not to mention travel to as a tourist. You won't have to worry about getting lost when you travel to an English-speaking country, as you'll easily be able to ask for directions, and taking guided tours, ordering food and chatting to the locals will no longer be a source of stress.</p>
<p>What's more, careers that involve lots of travel or international exposure, such as the airline, tourism and film industries, use English as their official language, and many employers in these sectors are likely to require evidence of a certain level of proficiency in English before they will consider employing you. This means that if you can speak English, you'll find that you have a greater number of possible careers to choose from after you finish at university.</p>
</div>
</div>
</li>
<li>
<img src="home/image3.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English gives you access to some of the world's best universities</h2>
<p>English is widely regarded as the language of higher education. Oxford, Cambridge, Harvard and MIT are just a few of the famous universities that occupy the lofty heights of the top of the world education league tables, and you'll need to speak English fluently for access to any of these, as they're all English-speaking. It goes without saying that if you are able to study at one of these institutions, you'll start your career with an illustrious name on your CV - and the benefits of that speak for themselves. If English isn't your native language, you'll need to take an English test during the admissions process to prove that your level of English is up to scratch for the demands of the academic environment. If you have your sights set on a top university, the effort you put in to study English as early as possible in your school years will be rewarded when it comes to the choice of universities to which you can apply.</p>
</div>
</div>
</li>
<li>
<img src="home/image4.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English is the language of some of the world's greatest literature</h2>
<p>If you learn English, you'll be able to enjoy works by some of the world's most famous writers, in the language in which they were intended to be read or heard. The works of Shakespeare will take on a new meaning when you're able to speak English, and you can look forward to enjoying such influential classics as Emily Bronte's Wuthering Heights and her sister's Jane Eyre, George Orwell's 1984 and Animal Farm, Jane Austen's Pride and Prejudice and many, many more. Translation rarely does a writer true justice, so the only way to appreciate a classic literary work properly is to read it in its original language. Even better, through doing so, you'll deepen your knowledge of English by enriching it with new words and sentence structures.</p>
</div>
</div>
</li>
<li>
<img src="home/image5.jpg" width="1200px" height="600px">
<div class="description">
<div class="description-text">
<h2>English gives you wider access to knowledge</h2>
<p>Did you know that 55% of the world's webpages are written in English? This absolutely dwarfs that of any other language, with the next most widely used language on the internet being Russian (which constitutes just 6% of pages). Knowledge of English therefore allows you to tap into far more of the world's intellectual resources.</p>
<p>English is also the language of science. If you learn English, you won't just have access to a greater proportion of the vast amount of knowledge available on the web; you'll be able to educate yourself still further by being able to read scientific books and papers. English is, of course, essential if you intend to pursue a scientific career. Within the Science Citation Index, compiled by the Institute for Scientific Information, an estimated 95% of articles are written in English despite only around half being from English-speaking countries. According to the Open University, "At Oxford University two thirds of post-graduate students come from outside the UK. The students in the university's chemistry research lab admit that working in English is a key attraction.</p>
</div>
</div>
</li>
<li>
<img src="home/image6.jpg" height="600px" width="1200">
<div class="description">
<div class="description-text">
<h2>English is a fantastic intellectual challenge!</h2>
<p>English is undoubtedly one of the harder languages to learn. Full of nuances, unexpected pronunciations, odd rules and infuriating exceptions to rules, it takes dedication and perseverance to reach a good level of fluency. If you're on the lookout for a new challenge, learning English may be just what you're after. Not only that, but because it's so widely spoken, it opens you up to a huge number of new cultural experiences, which will help you develop life skills, meet new people and grow your confidence in handling new situations.
<p>
Have we convinced you yet? If you've been inspired to learn English, consider enrolling on one of our English as a Foreign Language (EFL) courses (for students aged 13-15 or 16-18) and develop your English skills in the company of like-minded students in the beautiful city of Oxford.
</p>
</div>
</div>
</li>
<li>
<img src="home/image7.jpg" height="600px" width="1200">
<div class="description">
<div class="description-text">
<h2>English allows you to get more from popular culture</h2>
<p>The world's highest-grossing movies are made in Hollywood, and needless to say, they are made in English. How many times have you been to see an American blockbuster and been frustrated by having to keep up with fast-paced subtitles? And how many times have you hummed a favourite pop song, but not been able to sing along because it's in English and you don't know the words? There's a solution... Kiss those annoying cinema subtitles goodbye and get more out of the music you enjoy by learning English.
</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<a href="#section02"><span></span>Scroll</a>
</section>
<!--here is section 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
here is section 2 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!-->
<section id="section02" class="demo">
<div align="center">
<p class="Text-Slider">In countries marked with green english is used among 90-100 % of the population<br>whereas red means 0-10 % use it</p><br><br><br>
<img id="zoom_01" src='home/map2.png' data-zoom-image="home/map2.png"/ height="600" width="1200" style="padding-bottom: 90px">
</div>
<a href="#section03"><span></span>Scroll</a>
</section>
<script>
$('#zoom_01').elevateZoom({
zoomType: "inner",
cursor: "crosshair",
zoomWindowFadeIn: 500,
zoomWindowFadeOut: 750
});
</script>
</body>
</html>