1

我正在尝试复制谷歌图像功能，当用户单击图像时，div 会向下滑动以显示图像......

我需要弄清楚的是如何让浏览器向下滑动到被点击的图片框所在行的顶部。

这是我正在处理的草稿的链接

http://jsfiddle.net/m5sN5/2/

这是目前的 js

$('li').on('click', function(e){
  e.preventDefault();
  var active = $(this).siblings('.active');
  var posTop = ($(this).position()).top;
  if (active.length > 0) {
    var activeTop = (active.position()).top;
    if (activeTop == posTop) {
        $(this).find('.outer').finish().fadeIn('medium', function(){ 
            active.finish().toggleClass('active', 400).find('.outer').finish().fadeOut('medium');
        });

    } else {
        $(this).siblings('.active').finish().toggleClass('active', 400).find('.outer').finish().slideToggle();
        $(this).find('.outer').finish().slideToggle();
    }
} else {
    $(this).find('.outer').finish().slideToggle();
}
$(this).finish().toggleClass('active', 400);
});
$('.outer').on('click', function(e){
  return false;
});

所以当用户点击一个框时，浏览器应该会自动滑到被点击的行的顶部。

我试过使用各种插件，比如 scrollTo ，但它似乎需要一个特定的 id 才能滚动到......这对我来说很难，因为我使用的是响应式设计，所以行的顶部可能会根据用户调整大小的方式而改变浏览器。

任何想法将不胜感激

4

2 回答 2

1

在你的点击处理程序中试试这个：

$('body').animate({scrollTop: $(this).offset().top},300);

这将运行一个动画，将 scrollTop 属性设置body为 的顶部位置this，这应该是您单击的列表元素。

于 2013-09-19T00:34:34.717 回答
-1 
In this example I am appending the div after last element in the row.
**Here is my HTML**

<div class="container">
    <div class="box">0</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>

**Here is my jQuery**

var container = $('.container');
var elements = container.children();
var oldWrapPos = 0;

$('.box').click(function(){
    container.children().removeClass('selected'); // reset selected element
    $(this).addClass('selected'); // mark new selected element
    $('.info-bg').remove(); // removing the prviously added div    
    $('.box').removeClass('edge');
    var selectedPos = $(this).index(); // get selected position
    // find wrap element:
    //var containerWidth = container.width();
    //var elementsInRow = Math.floor(containerWidth / 100 );
    var elementsInRow = 4; // use this if container's width is fixed
    var row = Math.floor(selectedPos / elementsInRow)+1;
    var wrapPos = (row * elementsInRow);

    // if selected is on last row, use as wrap the last element:
    var size = elements.length;
    if (wrapPos >= size){wrapPos = size;}
    wrapPos = wrapPos - 1;
    console.log(selectedPos);
    console.log(elementsInRow);
    var pointerPos = 40 + ((selectedPos % elementsInRow) * 110)
    console.log(selectedPos % elementsInRow);
    console.log((selectedPos % elementsInRow) * 110);
    console.log('left: '+pointerPos);
    console.log(size);
    // next line added by CrocoDillon, didn't do any cleanup of old calculations :P
    pointerPos = $(this).position().left + $(this).width() / 2 - 10;
    // end edit;
    if (wrapPos == oldWrapPos){
        $('.info-pc').css("left", pointerPos+'px');
        elements.removeClass('edge');
        $(elements[wrapPos]).addClass('edge');
        $('.info-bg').slideUp( function() { $(this).remove(); });
        $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:'
                         +pointerPos+'px"></div><div class="info-cl"></div></div>');
        $('.info-bg').slideDown();
    } else {
        oldWrapPos = wrapPos;
        elements.removeClass('edge');
        $(elements[wrapPos]).addClass('edge');
        $('.info-bg').slideUp( function() { $(this).remove(); });
        $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:'
                         +pointerPos+'px"></div><div class="info-cl"></div></div>');
        $('.info-bg').slideDown();
    }
});

$('html').click( function (e) { 
    if ( e.target == this )
        $('.info-bg').slideUp( function() { $(this).remove(); });
});

**Here is my CSS**

.container{
    width: 440px;
    margin: 0 auto;
    position: relative;
}

.info-bg{
    width: 430px;
    height: 70px;
    background-color: red;
    float:left;
    position: relative;
    margin: 5px;
    display: none;
}

.info-cl{
    height: 100%;
}

.info-pc{
    position:absolute;
    border-bottom: 10px solid red;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    height: 0;
    width: 0;
    float: right;
    top: -10px;
}

.box{
    width:100px;
    height:170px;
    background-color: grey;
    float:left;
    margin:5px;
    font-size: 40px;
}

.edge{
    background-color:yellow;
}

.selected {
   background-color: red;

}

这是工作演示：

http://jsfiddle.net/silpa/9wftgt6j/1/

于 2014-11-10T20:00:25.810 回答