CSS燈箱在關閉時跳轉到頁首

我正在使用我的單頁產品組合網站。害怕JavaScript，我找到了一種在我的工作頁面上使用CSS創建燈箱的方法。網站可以在這裏查看：http://codepen.io/lauramortier/full/ChlcD/CSS燈箱在關閉時跳轉到頁首

如果你點擊「工作」，它會帶你到我的投資組合頁面，如果你點擊縮略圖，它會打開一個全尺寸的燈箱圖片。它的工作方式也是我想要的，直到你通過點擊X關閉它，它一直跳到站點的頂部... 任何想法如何讓它保持在當前的div？（即：？＃第3頁）

下面是HTML：

<head> 
    <title>Laura Mortier|Graphic Designer</title> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="javascript/smoothscroll.js"></script> 

<body> 
    <header> 
    <nav> 
     <ul> 
     <li><a href="#home" class="smoothScroll">Home</a></li> 
     <li><a href="#about" class="smoothScroll">About</a></li> 
     <li><a href="#work" class="smoothScroll">Work</a></li> 
     <li><a href="#contact" class="smoothScroll">Contact</a></li> 
     </ul> 
    </nav> 
    </header> 

    <!-----------------PAGES------------------> 


    <!------Home------> 

    <div id="page1"> 
    <a id="home"></a> 
    <h1 id="home-text">Salut! My name is Laura Mortier. 
     <br>I am a designer who loves making<br> 
      things look pretty.</h1> 
    </div> 


    <!------About------> 

    <div id="page2"> 
    <a id="about"></a> 
    <h1 id="about-title">About Me</h1> 

     <img src="http://i870.photobucket.com/albums/ab270/frenchspy007/6de8148c-6f03-497e-ba24-60c37b45978e_zps13deddb4.jpg"/> 

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
     <br>sed do eiusmod tempor incididunt ut labore et dolore<br> magna aliqua. Ut enim ad minim veniam, quis nostrud <br>exercitation ullamco laboris nisi ut aliquip ex ea commodo <br> consequat.<br> Duis aute irure dolor in reprehenderit in voluptate velit esse <br> cillum dolore eu fugiat nulla 
     pariatur. <br> Excepteur sint occaecat cupidatat non proident, sunt 
     <br>in culpa qui officia deserunt mollit anim id est laborum.</p> 

    </div> 


    <!------Work------> 

    <div id="page3"> 
    <a id="work"></a> 
    <h1 id="work-title">Work</h1> 
    <h2>Here are some of my recent works:</h2> 
    <div class="portfolio"> 

<ul id="gallery"> 
    <li> 

     <a class="lightbox" href="#image1"> 
     <img src="../Thumbnails/four element thumb.png"/> 
     </a> 
     <div class="lightbox-target" id="image1"> 
     <img src="../Full-Size Images/four elements cans.png"/> 
    <a class="lightbox-close" href="#"></a> 
     </div> 
    </li> 

    <li> 

     <a class="lightbox" href="#image2"> 
     <img src="../Thumbnails/watchdogs-thumb.png"/> 
     </a> 
     <div class="lightbox-target" id="image2"> 
     <img src="../Full-Size Images/watchdogs.png"/> 
    <a class="lightbox-close" href="#"></a> 
     </div> 

    </li> 


    <li> 

     <a class="lightbox" href="#image3"> 
     <img src="../Thumbnails/happy mouth logo final.png"> 
     </a> 
     <div class="lightbox-target" id="image3"> 
     <img src="../Full-Size Images/happy mouth logo final.png" 
    <a class="lightbox-close" href="#"></a> 
     </div> 

    </li> 



    <li> 

     <a class="lightbox" href="#image4"> 
     <img src='../Thumbnails/designer desk thumb.png'/> 
     </a> 
     <div class="lightbox-target" id="image4"> 
     <img src="http://i870.photobucket.com/albums/ab270/frenchspy007/designerdesk_zps1eb2bab6.png"/> 
    <a class="lightbox-close" href="#"></a> 
     </div> 

    </li> 

    <li> 

     <a class="lightbox" href="#image5"> 
     <img src="http://i870.photobucket.com/albums/ab270/frenchspy007/newMlogo_zpse9e2cd8f.png"/> 
     </a> 
     <div class="lightbox-target" id="image5"> 
     <img src="http://i870.photobucket.com/albums/ab270/frenchspy007/d8340feb-cc71-420a-a58a-c9b454bb8732_zps28886966.png"/> 
    <a class="lightbox-close" href="#"></a> 
     </div> 

    </li> 


     <li> 

     <a class="lightbox" href="#image6"> 
     <img src="../Thumbnails/paris my sweet-thumb"/> 
     </a> 
     <div class="lightbox-target" id="image6"> 
     <img src="../Full-Size Images/paris my sweet.png"/> 
    <a class="lightbox-close" href="#"></a> 
     </div> 

    </li> 

     <li> 

     <a class="lightbox" href="#image7"> 
     <img src="../Thumbnails/dark souls thumb.png"/> 
     </a> 
     <div class="lightbox-target" id="image7"> 
     <img src="../Full-Size Images/dark souls.png"/> 
    <a class="lightbox-close" href="#"></a> 
     </div> 

    </li> 

     <li> 

     <a class="lightbox" href="#image8"> 
     <img src="../Thumbnails/bioshock poster thumb copy.png"> 
     </a> 
     <div class="lightbox-target" id="image8"> 
     <img src="../Full-Size Images/bioshock poster.png"/> 
    <a class="lightbox-close" href="#"></a> 
     </div> 

    </li> 

</ul> 

    <!------BEHANCE BUTTON------> 


     <a href="http://www.behance.net/laura-mortier" target="_blank"> 
     <button id="behance"><h3 id="behance-text">See More on Behance</h3></button> 
     </a> 


    <!------Contact------> 

    <div id="page4"> 
    <a id="contact"></a> 
    <h1 id="contact-title">Get in touch!</h1> 
    <p id="contact-text">Wanna work with me or just wanna say hi?<br> 
    Drop me a line, and I'll get back to you as<br> 
soon as I can!</p> 

    <form action="FormtoEmail.php" method="post"> 

    <label>Name</label> 
    <input name="name" placeholder="Who are you?"><br> 

    <label>Email</label> 
    <input name="email" type="email" placeholder="What's your e-mail?"><br> 

    <label>Message</label> 
    <textarea name="message" placeholder="What's on your mind?"></textarea> 

    <br> <input id="submit" name="submit" type="submit" value="Submit"> 

</form> 

<!-------------CONTACT INFO-------------- 
    <div id="contact-info"> 
    <ul> 
     <li>[email protected]</li><br> 
     <li>262-359-0213</li> 
    </ul> 

    </div> 
----------------------------------------> 

<a href="#home" class="smoothScroll"><button id="back-to-top" type="button"><h3 id="fshoo">FSHOO!</h3></button></a> 

    </div> 


</body> 

<footer> 
    <h3 id="footer-text">Laura Mortier &copy; All Rights Reserved</h3> 
</footer>

和CSS

body{ 
    width:960px; 
    margin:0 auto; 
    display:block; 
    background-color:#34495e; 
} 

/*********Navigation***********/ 
header{ 
    display:block; 
    background-color:#34495E; 
    height:60px; 
    position:fixed; 
    width:960px; 
    top:0px; 
} 

header ul{ 
    margin:0; 
    padding:0; 
    float:right; 
    margin-top:15px; 
} 


li{ 
    list-style:none; 
    display:inline; 
    color:white; 
    font-family:helvetica; 
    font-weight:bold; 
    font-size: 24px; 
    padding: 20px; 

} 



a:hover{ 
    color: #3498db; 
} 

a{ 
    color:white; 
    text-decoration:none; 
} 

/*********HOME PAGE***********/ 

#page1{ 
    margin:0; 
    height:900px; 
    background-color:#2ecc71; 
    border-radius:10px; 
} 

#home-text{ 
    font-family:helvetica; 
    font-size:50px; 
    color:white; 
    padding-left:75px; 
    padding-top:100px; 
} 

/*********ABOUT PAGE***********/ 

#page2{ 
    height:700px; 
    background-color:#65C6BB; 
    border-radius:10px; 
    margin-top:20px; 
} 

#about-title{ 
    font-family:helvetica; 
    color:white; 
    padding-left:40px; 
    padding-top:20px; 
    padding-bottom:40px; 
} 

p{ 
    font-family:helvetica; 
    text-align:left; 
    color:white; 
    padding-left:100px; 
    padding-top:20px; 
} 

img{ 
    float:top; 
    display:block; 
    margin-left:175px; 
    padding:0; 
    border-radius:100%; 
    border: 5px solid white; 

} 


/*********WORK PAGE***********/ 

/**************GALLERY LIGHTBOX******************/ 

/*Eliminates padding, centers the thumbnail */ 

#page3{ 
    height:675px; 
    background-color:lightcoral; 
    border-radius:10px; 
    margin-bottom:20px; 
} 

#work-title{ 
    font-family:helvetica; 
    color:white; 
    padding-left:40px; 
    padding-top:20px; 
} 

h2{ 
    color:white; 
    font-family:helvetica; 
    padding-left:40px; 
    font-weight:normal; 
    font-size:24px; 
} 

.portfolio{ 
    height:400px; 
    margin:0 auto; 
    } 

#gallery li{ 
    display:inline-block; 
    margin:5px; 
    clear:both; 
    } 

#behance{ 
    background-color:lightcoral; 
    border-radius:10px; 
    color:white; 
    border: 2px white solid; 
    height:60px; 
    width:200px; 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:18px; 
    float:bottom; 
    margin-left:350px; 
    margin-bottom:20px; 
    } 

#behance:hover{ 
    color:white; 
    border: dashed 2px white; 
    } 

#behance-text{ 
    font-weight:normal; 
    padding:0; 
    margin:0; 
    } 
/*******************LIGHTBOX*******************/ 





/*******************LIGHTBOX*******************/ 


/* Styles the thumbnail */ 

a.lightbox img { 
height: 150px; 
width:150px; 
border: 3px solid white; 
border-radius:0px; 
box-shadow: 0px 0px 8px rgba(0,0,0,.3); 
margin: 5px; 
} 

/* Styles the lightbox, removes it from sight and adds the fade-in transition */ 

.lightbox-target { 
position: fixed; 
top: 0; 
left:0; 
width: 100%; 
background: rgba(0,0,0,.7); 
width: 100%; 
opacity: 0; 
-webkit-transition: opacity .5s ease-in-out; 
-moz-transition: opacity .5s ease-in-out; 
-o-transition: opacity .5s ease-in-out; 
transition: opacity .5s ease-in-out; 
overflow: hidden; 
} 

/* Styles the lightbox image, centers it vertically and horizontally, adds the zoom-in transition and makes it responsive using a combination of margin and absolute positioning */ 

.lightbox-target img { 
margin: auto; 
position: fixed; 
top: 0; 
left:0; 
right:0; 
bottom: 0; 
max-height: 0%; 
max-width: 0%; 
border: 3px solid white; 
box-shadow: 0px 0px 8px rgba(0,0,0,.3); 
box-sizing: border-box; 
-webkit-transition: .5s ease-in-out; 
-moz-transition: .5s ease-in-out; 
-o-transition: .5s ease-in-out; 
transition: .5s ease-in-out; 
border-radius:0px; 
} 

/* Styles the close link, adds the slide down transition */ 

a.lightbox-close { 
display: block; 
width:50px; 
height:50px; 
box-sizing: border-box; 
background: white; 
color: black; 
text-decoration: none; 
position: fixed; 
top: -80px; 
right: 0; 
-webkit-transition: .5s ease-in-out; 
-moz-transition: .5s ease-in-out; 
-o-transition: .5s ease-in-out; 
transition: .5s ease-in-out; 
} 

/* Provides part of the "X" to eliminate an image from the close link */ 

a.lightbox-close:before { 
content: ""; 
display: block; 
height: 30px; 
width: 1px; 
background: black; 
position: absolute; 
left: 26px; 
top:10px; 
-webkit-transform:rotate(45deg); 
-moz-transform:rotate(45deg); 
-o-transform:rotate(45deg); 
transform:rotate(45deg); 
} 

/* Provides part of the "X" to eliminate an image from the close link */ 

a.lightbox-close:after { 
content: ""; 
display: block; 
height: 30px; 
width: 1px; 
background: black; 
position: absolute; 
left: 26px; 
top:10px; 
-webkit-transform:rotate(-45deg); 
-moz-transform:rotate(-45deg); 
-o-transform:rotate(-45deg); 
transform:rotate(-45deg); 
} 

/* Uses the :target pseudo-class to perform the animations upon clicking the .lightbox-target anchor */ 

.lightbox-target:target { 
opacity: 1; 
top: 0; 
bottom: 0; 
} 

.lightbox-target:target img { 
max-height: 100%; 
max-width: 100%; 
} 

.lightbox-target:target a.lightbox-close { 
top: 0px; 
} 






/*********CONTACT PAGE***********/ 

#page4{ 
    background-color:steelblue; 
    height:700px; 
    border-radius:10px; 
    margin-bottom:10px; 
    margin-top:30px; 
} 

#contact-title{ 
    font-family:helvetica; 
    color:white; 
    padding-left:40px; 
    padding-top:20px; 
} 

#contact-text{ 
    color:white; 
    font-size:18px; 
    font-family:helvetica; 
    padding-left:40px; 
    font-weight:normal; 
} 

#submit{ 
    margin-top:20px; 
    } 

/*********CONTACT FORM***********/ 

form{ 
    padding-left:40px; 
} 

label{ 
    display:block; 
    margin-top:20px; 
    letter-spacing:2px; 
    font-family:helvetica; 
    color:white; 
    font-size:18px; 
} 

input, textarea { 
    width:400px; 
    height:27px; 
    background:#efefef; 
    border:1px solid #dedede; 
    padding:10px; 
    margin-top:3px; 
    font-family:helvetica; 
    font-size:0.9em; 
    color:#3a3a3a; 
} 

input, textarea { 
    width:400px; 
    height:27px; 
    background:#efefef; 
    border:1px solid #dedede; 
    padding:10px; 
    margin-top:3px; 
    font-size:0.9em; 
    color:#3a3a3a; 
    -moz-border-radius:5px; 
    -webkit-border-radius:5px; 
    border-radius:5px; 
} 

textarea { 
    height:213px; 
    background:url(images/textarea-bg.jpg) right no-repeat #efefef; 
} 

input:focus, textarea:focus { 
    border:1px solid #97d6eb; 
} 

#submit{ 
    background-color:steelblue; 
    font-family:helvetica; 
    font-size:18px; 
    color:white; 
    border: 2px solid white; 
    height:30px; 
    width:130px; 
    padding:0; 
} 

#submit:hover{ 
    background-color:lightcoral; 
} 

#contact-info{ 
    float:right; 
    color:white; 
    display:block; 
    font-family:helvetica; 
    font-size:16px; 
} 

/*********BACK TO TOP BUTTON***********/ 

#back-to-top{ 
    float:right; 
    padding-bottom:20px; 
    padding-right:30px; 
} 

#back-to-top{ 
    font-family:helvetica; 
    color:white; 
    font-size:16px; 
    font-weight:bold; 
    background-color:steelblue; 
    border: 2px solid white; 
    border-radius:10px; 
    height:30px; 
    width:150px; 
    margin-right:50px; 
    text-align:center; 

} 

#fshoo{ 
    margin-left:25px; 
    margin-top:20px;  

    } 

#back-to-top:hover{ 
    border:dashed 2px white; 
} 





/*********FOOTER***********/ 

footer{ 
    background-color:#34495E; 
    height:60px; 
    border-radius:10px; 
    margin-top:0px; 

} 


#footer-text{ 
    font-family:helvetica; 
    color:white; 
    font-size:18px; 
    font-weight: normal; 
    padding-top:10px; 
    padding-left:25px; 
}

預先感謝您！

來源

2014-06-23 captaingoose

使用此解決方法： 1）<a id="work"></a>標籤這樣

<a name="work"></a>

2）之後創建一個錨標記更改退出按鈕的href="#"到href="#work"，所以它會跳轉到重新工作

無處不在

<a class="lightbox-close" href="#work"></a>

來源

2014-06-23 14:49:36 joelschmid

只需更改關閉燈箱的鏈接上的href到href=#work"代替href="#"爲：

<a class="lightbox-close" href="#work"></a>

無需額外的HTML，它在的地方與已經鏈接，像這樣：在你的CSS目標選擇：

<a id="work"></a>

您正在使用所以你應該研究它，並理解使用它作爲CSS點擊事件的概念。
一個很好的教程：目標can be found here。
另一方面，你可以使用少得多的jquery來滾動頁面。
有關此方法的示例，請參閱This JSFiddle。

來源

2014-06-23 16:13:45

你可以只是href="javascript:;"更換href="#"：

<a class="lightbox-close" href="javascript:;"></a>

它會留你在哪裏。

來源

2014-06-23 16:18:32 putvande

CSS燈箱在關閉時跳轉到頁首

回答

相關問題