Kế toán cho một tiêu đề cố định với animate.scrolltop và (target) .offset(). Top;

Question

Đây phải là một câu hỏi khá cơ bản, nhưng tôi đã ném hầu hết buổi sáng của tôi vào nó, và vào thời điểm này tôi gần như ném vào khăn. Tôi thậm chí còn không phải là một chút foo js - nhưng tôi tìm thấy một đoạn độc đáo nhận xét mã mà tôi hy vọng sẽ sử dụng để animate neo liên kết đó là:

$(document).ready(function() { 
$('a[href*=#]').bind('click', function(e) { 
e.preventDefault(); //prevent the "normal" behaviour which would be a "hard" jump 

var target = $(this).attr("href"); //Get the target 

var scrollToPosition = $(target).offset().top; 

// perform animated scrolling by getting top-position of target-element and set it  as scroll target 
$('html, body').stop().animate({ scrollTop: scrollToPosition}, 600, function() { 
    location.hash = target; //attach the hash (#jumptarget) to the pageurl 
}); 

return false; 

}); 
}); 

Tôi đang cố gắng để làm cho nó 30px đất trên đỉnh bù đắp() -. tôi cố gắng

$('html, body').stop().animate({ scrollTop: scrollToPosition -30}, 600,

mà hầu như làm việc - nó đi đến đúng địa chỉ nhưng sau đó bị trả lại.

Tôi cũng đã thử

scrollTop: $(target).offset().top - 20 },

Tôi cũng đã thử

scrollTop: $(hash).offset().top + $('#access').outerHeight()

Mà dường như không thay đổi bất cứ điều gì.

Có vẻ như câu trả lời có thể ở đây: JQuery page scroll issue with fixed header nhưng tôi hoàn toàn không thể hiểu được.

Tôi biết điều này tương tự như các câu hỏi khác - nhưng tôi đã trải qua những gì tôi có thể tìm và tôi mù chữ đủ để tôi không thể sao chép/dán vào bất kỳ nội dung nào khắc phục sự cố.

Tôi vô cùng biết ơn vì giải pháp.

Rất cám ơn,

Martin

PS

này đoạn khác của mã tôi thấy không làm việc nhưng nó tước hashtag ra, mà làm cho nó hầu như vô dụng.

$(function(){ 
$('a[href*=#]').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
    && location.hostname == this.hostname) { 
     var $target = $(this.hash); 
     $target = $target.length && $target || $('[name=' + this.hash.slice(1) +']'); 
     if ($target.length) { 
      var targetOffset = $target.offset().top; 
      $('html,body').animate({scrollTop: targetOffset - 30}, 1000); 
      return false; 
     } 
    } 
    }); 
}); 

Answer 1

EDITED: Bạn chỉ cần để phát hiện chiều cao của tiêu đề cố định và trừ rằng từ scrollToPosition mà bạn đã làm một cách chính xác. Vấn đề là window.location.hash = "" + target; nhảy trang lên đầu phần tử với id đó. Vì vậy, nếu bạn animate có như bạn đang làm và sau đó thay đổi để băm nó sẽ "trả lại" như bạn mô tả. Dưới đây là cách đầu tiên chúng ta có thể chống lại điều này:

// Get the height of the header 
var headerHeight = $("div#header").height(); 

// Attach the click event 
$('a[href*=#]').bind("click", function(e) { 
    e.preventDefault(); 

    var target = $(this).attr("href"); //Get the target 
    var scrollToPosition = $(target).offset().top - headerHeight; 

    $('html').animate({ 'scrollTop': scrollToPosition }, 600, function(){ 
     window.location.hash = "" + target; 
     // This hash change will jump the page to the top of the div with the same id 
     // so we need to force the page to back to the end of the animation 
     $('html').animate({ 'scrollTop': scrollToPosition }, 0); 
    }); 

    $('body').append("called"); 
}); 

Dưới đây là một mới jsfiddle cho phương pháp đầu tiên này: http://jsfiddle.net/yjcRv/1/

THÊM EDIT: Một thậm chí cách tốt hơn để kiểm soát các sự kiện thay đổi băm là sử dụng plugin như jQuery Address. Với điều này bạn có thể sử dụng các sự kiện hashchange của bạn nhiều hơn nữa.Dưới đây là một cách sử dụng ví dụ:

// Get the height of the header 
var headerHeight = $("div#header").height(); 

$.address.change(function(evt){ 
    var target = "#" + evt["pathNames"][0]; //Get the target from the event data 

    // If there's been some content requested go to it…else go to the top 
    if(evt["pathNames"][0]){ 
     var scrollToPosition = $(target).offset().top - headerHeight; 
     $('html').animate({ 'scrollTop': scrollToPosition }, 600); 
    }else{ 
     $('html').animate({ 'scrollTop': '0' }, 600); 
    } 

    return false; 
}); 

// Attach the click event 
$('a').bind("click", function(e) { 
    // Change the location 
    $.address.value($(this).attr("href")); 

    return false; 
}); 

sống ví dụ ở đây: http://www.vdotgood.com/stack/user3444.html

LƯU Ý: Bạn không cần phải thêm băm để liên kết của bạn thuộc tính href bây giờ. Dưới đây là một liên kết mà bạn có thể nhắm mục tiêu với một selector jQuery:

<!-- This is correct --> 
<a href="/target" class="myclass">Target</a> 

<!-- These are incorrect --> 
<a href="/#/target" class="myclass">Target</a> 

<a href="#/target" class="myclass">Target</a> 

Để nhắm mục tiêu liên kết này, bạn muốn sử dụng một chọn như:

$("a.myclass").click(function(){ 
    $.address.value($(this).attr("href")); 
    return false; 
}); 

---

jQuery Địa chỉ nào trên thực tế tìm kiếm các liên kết có thuộc tính sau:

<a href="/target" rel="address:/target">Target</a> 

Thuộc tính rel ở đây tiếp theo ains address: theo sau là một url tương đối do bạn xác định trong trường hợp này là /target. Nếu bạn sử dụng, jQuery Address sẽ phát hiện liên kết và tự động kích hoạt sự kiện thay đổi băm.

Answer 2

Tôi biết đây là một câu hỏi cũ (loại) nhưng tôi đã gặp sự cố tương tự với điều hướng thả xuống cố định trên trang web. Lưu ý đây là đoạn mã cuộn trơn tru, mặc dù bạn có thể dễ dàng tạo đoạn mã tự động bằng cách thay đổi tốc độ hoạt ảnh.

jQuery:

$('body').on('click','a[href^="#"]',function(event){ 
    event.preventDefault(); 
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0; 
    //change this number to create the additional off set   
    var customoffset = 75 
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500); 
}); 

Tôi đã sử dụng đoạn mã này trong một thời gian dài mà không có bất kỳ vấn đề. Điều duy nhất tôi không thích về nó, là nó sẽ lấy BẤT CỨ # thẻ. Vì vậy, trong một plugin như plugin Flexslider nơi điều hướng sử dụng # của tôi tự dải chúng từ các plugin.

Answer 3

Tôi đã tinh chỉnh tập lệnh gốc từ http://www.paulund.co.uk/smooth-scroll-to-internal-links-with-jquery. Nó hoạt động tuyệt vời nhưng bạn không thể thiết lập một sự chậm trễ như nó được.

var headerHeight = $("header").height(); 


     $(document).ready(function(){ 
    $('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 

     var target = this.hash, 
     $target = $(target); 

     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top - headerHeight 
     }, 1200, 'swing', function() { 
      window.location.hash = target ; 
     }); 
    }); 
}); 

Vâng, tôi hơi muộn nhưng vấn đề này chỉ xảy ra với tôi ... Chúc mừng!