Выделите идентификатор минус несколько пикселей

Question

У меня уже есть код ниже, и он работает хорошо, чтобы прокрутить вниз до идентификатора ('expressRate') при загрузке страницы.Но с изменением требований страница должна прокрутиться вниз до точки на 50 пикселей выше идентификатора div 'expressRate'.Любая помощь будет оценена.

 $location.hash('expressRate');
 $anchorScroll();

Answer 1

Вам не нужна структура для чего-то такого простого, вы можете использовать getBoundingClientRect() для элемента, к которому вы пытаетесь прокрутить.Допустим,

Метод Element.getBoundingClientRect () возвращает размер элемента и его положение относительно области просмотра.

Допустим, что: result = b.getBoundingClientRect();

Это даст вам блок элемента в DOM-связанных вещах, но вы действительно хотите только одну вещь: result.x координата, представляющая координату x в пикселях с учетом VIEWPORT.

Теперь вы можете просто использовать window.scrollTo() к координате x этого элемента -50px для прокрутки, где вы хотели.

HTML:

<code><button id="but" onClick="scrol()">SCROLL TO 50px before</button>
<div id="a"><span id="b">WHERE AM I?</span></div>
<div id="tall">&nbsp;</div>
<pre>

CSS:

#but { position: fixed; }
#a { padding:16px; position: absolute; top:300px;}
#b { background:yellow;}
#tall { height:2000px }

JS:

function scrol(){
  var b = document.querySelector('#b');
  window.scrollTo(b.getBoundingClientRect().x-50, 200);
}

Вуаля, 2-слойное ванильное решение:)

Для быстрой демонстрации, пожалуйста, посмотрите на эту скрипку: http://jsfiddle.net/58gzv79h/1/

ПРИМЕЧАНИЕ: в скрипкерешение немного больше, чтобы показать вам, как в отличие от result, X не изменяется с момента загрузки документа.

Answer 2

попробуйте этот код JavaScript после прокрутки к тегу «expressRate»

window.location('#expressRate');
window.scrollBy(0,-50);

Answer 3

//get the element
var $expressRate = $('#expressRate');
//get the vertical distance of the element from the top of the page
var verticalPositionOfElement = $expressRate.offset().top;

//added a timeout just so you could see the start and then the
//adjustment
setTimeout(function () {
  //scroll the window down the element distance, minus whatever
  $(window).scrollTop(verticalPositionOfElement - 50);
}, 1000);

html, body {
  min-height: 5000px;
}

#expressRate {
  min-height: 200px;
  margin-top: 1000px;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="expressRate">

Answer 4

window.scroll(0,findPos(document.getElementById("expressRate")) - 50);

    function findPos(obj) {
        var curtop = 0;
        if (obj.offsetParent) {
            do {
                curtop += obj.offsetTop;
            } while (obj = obj.offsetParent);
        return [curtop];
        }
    }