прокрутите к началу .offset () используя процент% - PullRequest
Новая
       15

прокрутите к началу .offset () используя процент%

5 голосов
/ 18 июля 2011

Я только что написал это для прокрутки страниц, которая работает нормально и делает то, что должна .. 

$('#nav a').click(function(){

var sid = $(this).attr('id');

$('html,body').animate({
 scrollTop: $('#'+ sid +'-content').offset().top - 200}, 1000);
  return false;
});

.. но я хочу, чтобы смещение вычислялось на%, а не на px

то есть, а не 

top - 200

это могут быть 

top - 30%

какие-либо идеи, как этого добиться?

Как всегда, любая помощь приветствуется и спасибо заранее.

Быстрое редактирование:

Текущие 3 ответа (спасибо), кажется, умножаются каждый раз, что не то, что я хочу, я хочу иметьпостоянный зазор в 30% высоты окна каждый раз, поэтому каждый раз, когда # id-контент прокручивается до верхних строк с фиксированной позиционной боковой панелью, которая у меня есть.

Мой текущий код оставляет пробел в 200px, но это вызываетпроблема с различными размерами монитора / браузера, где% будет разбираться.

Ответы [ 5 ]

6 голосов
/ 18 июля 2011

Следующее будет располагать поле всегда на 60% сверху: 

var offset = parseInt($('#example').offset().top);
var bheight = $(window).height();
var percent = 0.6;
var hpercent = bheight * percent;
$('html,body').animate({scrollTop: offset - hpercent}, 1000);
1 голос
/ 10 января 2018

Я знаю, что это уже годы, и ОП, скорее всего, уже нашел решение, но вот мое простое решение для тех, кто сталкивается с этим в любом случае .. 

  var navBarHeight = $('#navBar').height();
            $('html, body').animate({
                scrollTop: $("#scrollDestination").offset().top-navbarheight
            }, 1000);
1 голос
/ 18 июля 2011

Вы можете рассчитать 30% смещения и использовать это: 

$('#nav a').click(function(){

    var sid = $(this).attr('id');
    var offset = $('#'+ sid +'-content').offset().top;

    $('html,body').animate({scrollTop: offset - (offset * 0.3)}, 1000);
    return false;
});

Вот пример скрипты , показывающий это в действии.

0 голосов
/ 18 июля 2011

Попробуйте это 

$('#nav a').click(function(){

var sid = $(this).attr('id');
var contentTop = $('#'+ sid +'-content').offset().top;
contentTop = parseInt(contentTop - (contentTop *0.3)); 
$('html,body').animate({ scrollTop: contentTop }, 1000);
  return false;
});
0 голосов
/ 18 июля 2011

Не уверен, что именно вы хотите 30%, но вы можете просто умножить то, что вы хотите, на 0,3%, а затем вычесть это сверху.

Если это само верхнее смещение, вы хотите 30% от: 

$('html,body').animate({
    scrollTop: $('#'+ sid +'-content').offset().top - $('#'+ sid +'-content').offset().top * 0.3 }, 1000);
    return false;
});

Конечно, это кажется немного глупым, поскольку это просто эквивалентно $('#'+ sid +'-content').offset().top * 0.7, но вы можете заменить его на что угодно.

...