如何滾動到懸停圖像的底部

Question

嗨，我只是想知道最好的方式去滾動到懸停圖像的底部。圖像處於隱藏溢出的包裝中，因爲其相當長。理想情況下，平滑滾動到底部是我正在尋找隱藏圖像的其餘部分。

我一直在玩弄jquery試圖讓它工作，但我陷入了泥潭。不知道我的代碼是否正確，或者不是真的。

感謝所有幫助

$('#image-wrap img').on('hover', function() { 
 
    var target = $(this), 
 
    height = target.height(), 
 
    scrollHeight = target.prop('scrollHeight'); 
 

 
    target.animate({ 
 
    scrollTop: scrollHeight - height 
 
    }, 2000); 
 
});

#main-wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
#box-wrapper { 
 
    position: relative; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px black solid; 
 
    position: relative; 
 
} 
 

 
#image-wrap { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
#image-wrap img { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-wrapper"> 
 
    <div id="box-wrapper"> 
 
    <div id="box"> 
 
     <div id="image-wrap"> 
 
     <img src="http://via.placeholder.com/600x2000" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

所以我猜你想要滾動整個頁面（有點像使用鼠標滾輪）？

你可以做這樣的事情：

$('#image-wrap img').on('hover', function() { 
    var target = $(this), 
    height = target.height(), 
    scrollHeight = target.offset().top; 

    $('body,html').animate({ 
     scrollTop:scrollHeight+height-500 
    },500); 
}); 

這則滾動頁面，因此圖像的最後一個500px的是可見的。如果這不能解決您的問題，整個頁面的示例將會有所幫助。

Answer 2

如果圖像被隱藏，則無法與其進行交互。如果它是可見的，你可以像這樣使用scrollTo（）。

1. 捕獲使用scrollTop的當前滾動位置（）

   變種POS = $（ '你的圖像容器'）scrollTop的（）;

2. 抓住圖像容器

   VAR HEIGHT = $的高度（ '你的圖像容器'）高度（）。

3. 添加兩個值

   變種通過MoveTo = POS +高度;

4. 自動滾動到位置

   window.scrollTo（0，通過MoveTo）;

Answer 3

我現在明白你的想法了。

HTML

$(document).ready(function(){ 
 
    $('#img-holder').mouseenter(function(){ 
 
    var x = $('img').height(); 
 
    x = x-400; 
 
    $('img').animate({'position':'absolute','top':'-'+x}, 300); 
 
    }); 
 
    $('#img-holder').mouseleave(function(){ 
 
    $('img').css({'position':'relative','top':'0'}); 
 
    }); 
 
});

#img-holder{ 
 
    width:100%; 
 
    height:400px; 
 
    border:2px solid; 
 
    overflow:hidden; 
 
    position:relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="img-holder"> 
 
    <img src="https://blog.hittail.com/wp-content/uploads/sites/8/2013/01/hidden-value-of-long-tail-seo-1000.png" width="100%"> 
 
</div>

的想法是使IMG的絕對位置，並給它顯示的底部部分的值。

這裏是一個工作DEMO

Answer 4

請嘗試以下方法：

$('#image-wrap img').hover(function() { 
 
    $('html, body').animate({ 
 
     scrollTop: $(this).offset().top + $(this).outerHeight() 
 
    }, 2000); 
 
});

#main-wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
#box-wrapper { 
 
    position: relative; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px black solid; 
 
    position: relative; 
 
} 
 

 
#image-wrap { 
 
    overflow: hidden; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0; 
 
} 
 

 
#image-wrap img { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-wrapper"> 
 
    <div id="box-wrapper"> 
 
    <div id="box"> 
 
     <div id="image-wrap"> 
 
     <img src="http://via.placeholder.com/600x2000" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 5

您可以使用簡單的CSS3。在懸停添加轉換transform: translateY(-100%)，但它不像jQuery解決方案那樣聰明。

#main-wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
} 
 

 
#box-wrapper { 
 
    position: relative; 
 
} 
 

 
#box { 
 
    width: 100%; 
 
    height: 400px; 
 
    border: 1px black solid; 
 
    overflow: hidden; 
 
} 
 

 
img { 
 
    transition: all 2000ms ease-out; 
 
} 
 

 
#box:hover img { 
 
    transform: translateY(-100%); 
 
}

<div id="main-wrapper"> 
 
    <div id="box-wrapper"> 
 
    <div id="box"> 
 
     <img src="http://lorempixel.com/400/1000/sports/" /> 
 
    </div> 
 
    </div> 
 
</div>