jQuery cuộn đến div khi di chuột và quay lại phần tử đầu tiên

Question

Tôi về cơ bản có một div có kích thước được đặt và overflow: hidden. Div đó chứa 7 div con (nhưng chỉ hiển thị một lần tại một thời điểm) mà tôi muốn được di chuyển thông suốt theo chiều dọc khi các liên kết tương ứng của chúng được lơ lửng.

Tuy nhiên, phần đầu tiên (div) không có liên kết và là phần mặc định khi không có liên kết nào được di chuột.

Hãy xem jsFiddle này để xem một cấu trúc cơ bản của những gì tôi đang nói về: http://jsfiddle.net/YWnzc/

Tôi đã cố gắng thực hiện điều này với jQuery scrollTo nhưng đã không thể để có được nó để làm việc.

Mọi trợ giúp sẽ được đánh giá cao. Cảm ơn.

Answer 1

Một cái gì đó như thế này?

http://jsfiddle.net/YWnzc/5/

mã:

jQuery("#nav").delegate("a", "mouseenter mouseleave", function (e) { 
    var i, self = this, 
    pos; 

    if (e.type == "mouseleave") { 
    i = 0; 
    } 
    else { 
    //Find out the index of the a that was hovered 
     jQuery("#nav a").each(function (index) { 
      if (self === this) { 
      i = index + 1; //the scrollTop is just calculated from this by a multiplier, so increment 
      return false; 
      } 
     }); 
    } 

    //Find out if the index is a valid number, could be left undefined 
    if (i >= 0) { 

     //stop the previous animation, otherwise it will be queued 
     jQuery("#wrapper").stop().animate({ 
     scrollTop: i * 200 
     }, 500); 
     //I would retrieve .offsetTop, but it was reporting false values :/ 
    } 

    e.preventDefault(); 
}); 

Answer 2

FYI: Đó là JSFIDDLE bạn đã gửi cho tôi để đi đến khuôn khổ MooTools, không phải jQuery ... fyi. (Có thể là lý do tại sao nó không làm việc sao chép

và dán mã này chính xác và nó sẽ làm việc trong jQuery cho di chuyển hoạt hình

Hãy thử điều này cho di chuyển mượt mà trong DIV, tôi thử nghiệm nó -?. Nó hoạt động tuyệt vời Bạn.

$(function() { 

    function filterPath(string) { 
     return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 

    var locationPath = filterPath(location.pathname); 
    var scrollElem = scrollableElement('#wrapper'); 

    // Any links with hash tags in them (can't do ^= because of fully qualified URL potential) 
    $('a[href*=#]').each(function() { 

     // Ensure it's a same-page link 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if ( locationPath == thisPath 
      && (location.hostname == this.hostname || !this.hostname) 
      && this.hash.replace(/#/,'')) { 

       // Ensure target exists 
       var $target = $(this.hash), target = this.hash; 
       if (target) { 

        // Find location of target 
        var targetOffset = $target.offset().top; 
        $(this).click(function(event) { 

         // Prevent jump-down 
         event.preventDefault(); 

         // Animate to target 
         $(scrollElem).animate({scrollTop: targetOffset}, 400, function()  { 

          // Set hash in URL after animation successful 
          location.hash = target; 

         }); 
        }); 
       } 
     } 

    }); 

    // Use the first element that is "scrollable" (cross-browser fix?) 
    function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
      var el = arguments[i], 
      $scrollElement = $(el); 
      if ($scrollElement.scrollTop()> 0) { 
       return el; 
      } else { 
       $scrollElement.scrollTop(1); 
       var isScrollable = $scrollElement.scrollTop()> 0; 
       $scrollElement.scrollTop(0); 
       if (isScrollable) { 
        return el; 
       } 
      } 
     } 
     return []; 
    } 

}); 

FYI:. tín dụng cho mã này không đi với tôi như một nhà phát triển cá nhân, mặc dù tôi đã hơi tinh chỉnh mã chủ sở hữu và tác giả của mã này là Chris Coyier và bạn có thể tìm thêm về mã di chuyển này tại đây: http://css-tricks.com/snippets/jquery/smooth-scrolling/

Answer 3

$("#nav a").hover(function() { 
    var sectionName = $(this).attr("href"); 
    var sectionPos = $(sectionName).offset().top; 
    var wrapperPos = $("#wrapper").offset().top; 
    var wrapperScroll = $("#wrapper").scrollTop(); 
    var scrollPos = sectionPos - wrapperPos + wrapperScroll; 
    $("#wrapper").stop().animate({scrollTop:scrollPos}, 600); 
}, function() { $("#wrapper").stop().animate({scrollTop:0}, 600); }); 

Answer 4

Dưới đây là một ví dụ làm việc: http://jsfiddle.net/YWnzc/7/

Và mã (khá giống với của rizzle, với một vài thay đổi mà tôi sẽ giải thích):

$('a').hover(function(){ 
    var selector = $(this).data('section'); 
    var scrollAmount = $(selector).offset().top + $('#wrapper')[0].scrollTop - 129; 
    $('#wrapper').animate({scrollTop: scrollAmount}, 250); 
},function(){ 
    $('#wrapper').animate({scrollTop: 0}, 250); 
}); 

Đầu tiên, var selector = $(this).data('section'); bec ause trong jsFiddle, thuộc tính href đã trả lại đường dẫn đầy đủ của trang + mã băm. Vì vậy, tôi đã thay đổi nó thành thuộc tính dữ liệu html5 (data-section).

Dòng tiếp theo tương tự như sự cố của rizzle, ngoại trừ việc chúng tôi lấy phần bù của phần và thêm nó vào giá trị scrollTop hiện tại của #wrapper. Như ông đã chỉ ra, có một số vấn đề bù đắp kỳ lạ đang diễn ra vẫn còn, và tôi thấy rằng trừ 129 đã làm các trick. Trong khi con số 129 này có vẻ giống như thứ gì đó có khả năng phá vỡ, tôi đã thử nghiệm thay đổi kích thước của các phần, làm cho chúng không bằng nhau, vv và nó tiếp tục hoạt động. Tôi đang sử dụng Chrome và có lẽ một trình duyệt không phải là webkit sẽ cần một hằng số khác để trừ. Nhưng có vẻ như số 129 đó ít nhất là một số loại hằng số.

Phần còn lại phải khá tự giải thích.Một điều cần lưu ý: khi bạn di chuyển con trỏ qua các thẻ <a>, nội dung của số #wrapper div dường như nhảy xung quanh, nhưng đó chỉ là do phần mouseleave của sự kiện di chuột được kích hoạt khi con trỏ di chuyển. Tôi chắc chắn bạn có thể giải quyết điều đó mặc dù :)