how can i scroll to #target - 100px?

Question

I'm trying to use

<a href="#target">Details</a>

<div id="target">asd...</div>

but I also have top popup menu. So it's getting behind that menu.

Is it possible to write a JavaScript (also I'm already using bootstrap and jquery libraries on my template) go to #target - 100px

Thanks in advance

Answer 1

Never tried, but something like this should work.

 $('html, body').animate({
     scrollTop: $("#elementtoScrollToID").offset().top - 100
 }, 1000); // this is the time in millisecond of the animation

Answer 2

A simple JavaScript only solution is:

window.scrollTo(x,y)

For your example you would use:

window.scrollTo(0,100)

Answer 3

Step 1: Include Ariel Flesler's jquery.scrollTo-min.js

http://flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js

Step2: Add

$('a').scrollTo( $('#target'), 1000, {offset:-100} );

Answer 4

 scrollTop: ($($anchor.attr('href')).offset().top)-300

This is my code and it's works. -300 = pixels