Add or reduce a value in . top by clicking on the link to ID

Asked

Viewed 98 times

0

I have a jQuery function that makes a smooth scroll on the page by clicking on the ID link.

$(function() {
		$('a[href*="#"]:not([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) {
				$('html, body').animate({
					scrollTop: target.offset().top
				}, 1000);
				return false;
			}
		}
		});
	});

It works perfectly. The problem is that I have a div with position Fixed of height: 100px that gives an overlay in the first 100px div. I need to add these 100px at the time the Scroll happens, clicking on the div. I have no idea how to do that.

javascript jquery html5

  • I don’t quite understand what you need, so give me a better example. If so, post your HTML and CSS as well. Your code above, when running is giving error, it is possible to put it in a Jsfiddle, Jsbin or Codepen?

  • 1

    In the where has scrollTop you put less 100. It would look like scrollTop: (target.offset(). top - 100)

  • 1

    @Hugolima Perfect! I didn’t know I could act that way. Thank you

1 answer

1


var targetOffset = $target.offset(). top - 100;

Or take the header element height for the extra scroll.

var targetOffset = $target.offset(). top - $("element"). outerHeight(true);

Browser other questions tagged javascript jquery html5

You are not signed in. Login or sign up in order to post.