将滚动分区返回顶部

时间:2014-08-14 14:02:11

标签: html overflow

我有一个div在悬停时动画一张照片。 div中的内容偶尔对div来说太大了,所以我将div设置为overflow:scroll。当用户停止悬停然后再次悬停时,有没有办法让滚动div重置到顶部?

<figcaption class="figure" align="center" style="width: 92%; height: 95%; overflow: scroll;  padding-right: 12px;">
            <h2>The Exiled Queen</h3>
            <p>Han is a wizard and must learn how to use his gift of magic at the school of Oden's Ford.</p> 
            <p>Meanwhile, Princess Heir, Raisa ana'Marianna, is fleeing The Fells to escape an unwanted marriage. But where can she go to stay out of trouble?</p>  
</figcaption>
</figure>
<figure class="cap-bot">
            <img src="http://yabooks.ml/Images/The Gray Wolf Throne.jpeg" alt="" style="width: 95%; padding-top: 10px; padding-bottom: 10px; padding-left: 0.5%;">
            <figcaption class="figure" align="center" style="width: 92%; height: 95%; overflow: scroll; padding-right: 12px;">
            <h2>The Gray Wolf Throne</h3>
            <p>Raisa has escaped from her captor, Micah Bayar, and begun her journey back to the Fells. But when her entire guard is killed, she learns that a return to the Fells may create more problems than it solves.</p> 
            <p>Hans Halister desperately needs to find Rebecca Moreley, his friend from Oden's Ford. But when he finds her, hours from death in the Fells, he learns that she is not who she said she was. She is Raisa, ana'Marianna, princess heir to the Fells.</p>
            <p>But the Fells is dangerous place. When Queen Mariana turns up dead, Raisa knows that she has no choice but to claim the throne. But with danger closing in on her from all sides, she will need all the help she can get.</p>    
</figcaption>
</figure>
<figure class="cap-bot">
            <img src="http://yabooks.ml/Images/The Crimson Crown.jpeg" alt="" style="width: 95%; padding-top: 10px; padding-bottom: 10px; padding-left: 0.5%;">
            <figcaption class="figure" align="center" style="width: 92%; height: 95%; overflow: scroll; padding-right: 12px;">
            <h2>The Exiled Queen</h3>
            <p>Han is a wizard and must learn how to use his gift of magic at the school of Oden's Ford.</p> 
            <p>Meanwhile, Princess Heir, Raisa ana'Marianna, is fleeing The Fells to escape an unwanted marriage. But where can she go to stay out of trouble?</p>  
</figcaption>
</figure>
<style>
figure {
display: block;
position: relative;
float: left;
overflow: hidden;
margin: 0 20px 20px 0;
background-color: rgba(255, 255, 255, 0.5);
width: 80%;
border-radius: 5px;
margin-left: 10%
margin-bottom: 5px;
}
figcaption {
position: absolute;
background: black;
background: rgba(0,0,0,0.75);
color: white;
padding: 10px 10px;
opacity: 0;
-webkit-transition: all 0.6s ease;
-moz-transition:    all 0.6s ease;
-o-transition:      all 0.6s ease;
border-radius: 5px;
}
figure:hover figcaption {
opacity: 1;
}
figure:before {
content: "";
position: absolute;
font-weight: 800;
background: black;
background: rgba(255,255,255,0.75);
text-shadow: 0 0 5px white;
color: black;
width: 24px;
height: 24px;
-webkit-border-radius: 12px;
-moz-border-radius:    12px;
border-radius:         12px;
text-align: center;
font-size: 14px;
line-height: 24px;
-moz-transition: all 0.6s ease;
opacity: 0.75;
}
figure:hover:before {
opacity: 0;
}

.cap-left:before {  bottom: 10px; left: 10px; }
.cap-left figcaption { bottom: 0; left: -30%; }
.cap-left:hover figcaption { left: 0; }

.cap-right:before { bottom: 10px; right: 10px; }
.cap-right figcaption { bottom: 0; right: -30%; }
.cap-right:hover figcaption { right: 0; }

.cap-top:before { top: 10px; left: 10px; }
.cap-top figcaption { left: 0; top: -30%; }
.cap-top:hover figcaption { top: 0; }

.cap-bot:before { bottom: 10px; left: 10px; }
.cap-bot figcaption { left: 0; bottom: -30%;}
.cap-bot:hover figcaption { bottom: 0; }

2 个答案:

答案 0 :(得分:4)

您可以将该div的scrollTop设置为0。

$('#content').scrollTop(0);

见这里: http://jsfiddle.net/donnellyjoe/Lktwg16h/

答案 1 :(得分:1)

处理滚动事件

jquery的:

$('#content').hover( function() {
    // mouse over code
}, function() {
    // mouse out code
});

native js:

var item = document.getElementById("content");
item.addEventListener("mouseover", function() {
    // mouse over code
}, false);
item.addEventListener("mouseout", function() {
    // mouse out code
}, false);

设置滚动位置

jquery的:

$('#content').scrollTop(0);

native js:

document.getElementById('content').scrollTop = 0;

如果没有关于您需要的更多信息,这些是完成您正在使用的功能所需的所有部分。