Develop Reference

Override default scroll behaviour target on same page

I have a page with a navbar with links on the same page. When i disable all js plugins and click on a link it "jumps" (without smooth scroll) to the anchored link.
But because i have a sticky header it's neccessary that i use a offset. Because of that i copied this nice piece of code from the web:
My "navbar"
<div id=myAffix>My Affix</div>
Example link
The part of the html page:
<li id="2849" class="list-group-item list-group-item-info">
<h6>Example header</h6>
</li>
// Add smooth scrolling on all links inside the navbar
$("#myAffix a").on('click', function (event) {
var offset = 125;
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - offset
}, 800, function () {
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
When i now click the link it smooth scrolls to that part (with the offset) and after that it "jumps" to the position without the offset. I tried to override default scroll behaviour, disable single js plugins but it keeps this behaviour. Does anyone have an idea?

jQuery smooth scroll to element - not working properly

I was trying to make a "Click to Scroll" menu on my website (www.trianglesquad.com). I tried a code from
w3schools.com "https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll". I am facing a problem. It doesn't scroll to perfect point. For Example, If I click on "Portfolio", It scrolls to the mid of portfolio section. It scroll to perfect point after 3-4 Clicks.
Any Help will be highly appreciated :)
Thanks.

Not sure why all the down votes, as we all were beginners at some stage... Maybe for future posts, try creating a JS fiddle with an example and be more specific.
You can change the scrolling offset by adding or subtracting from the offset as per below example:
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top -200
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
The key take away here is this line:
scrollTop: $(hash).offset().top -200
You can add or subtract any amount of pixels that you choose.
Edit:
Actually try this code instead:
$(document).ready(function() {
$("#xp-navigation").find("a[href*=#]:not([href=#])").click(function () {
var offset = 0;
var speed = 1000;
var target = $(this.hash);
$("html,body").animate({
scrollTop: target.offset().top - offset
}, speed);
});
});
It is a bit cleaner and you can also adjust the offset.

How to enable normal scroll behavior, at certain DIV element

I'm having a bit of trouble getting a one-page scroll to behave the way I want it to. I would like the first to be full page and when they scroll down, it will full page scroll to the next element. But when they reach the 2nd section element - it will revert to regular scrolling behavior. This is because the rest of the page is not full page or one page.
I basically want the intro to be a full page, and then do a full page scroll into the next section where they can freely scroll down normally. When they scroll back up to the first section it should full page scroll again to the intro.
I'm using the below code. This is working for the full page transition into section 2, but I can't figure out how to revert to normal scrolling behavior after they reach section 2.
$('section').height($(window).height());
/*set the class 'active' to the first element
this will serve as our indicator*/
$('section').first().addClass('active');
/* handle the mousewheel event together with
DOMMouseScroll to work on cross browser */
$(document).on('mousewheel DOMMouseScroll', function (e) {
e.preventDefault();//prevent the default mousewheel scrolling
var active = $('section.active');
//get the delta to determine the mousewheel scrol UP and DOWN
var delta = e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0 ? 1 : -1;
//if the delta value is negative, the user is scrolling down
if (delta < 0) {
//mousewheel down handler
next = active.next();
//check if the next section exist and animate the anchoring
if (next.length) {
/*setTimeout is here to prevent the scrolling animation
to jump to the topmost or bottom when
the user scrolled very fast.*/
var timer = setTimeout(function () {
/* animate the scrollTop by passing
the elements offset top value */
$('body, html').animate({
scrollTop: next.offset().top
}, 'slow');
// move the indicator 'active' class
next.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
} else {
//mousewheel up handler
/*similar logic to the mousewheel down handler
except that we are animate the anchoring
to the previous sibling element*/
prev = active.prev();
if (prev.length) {
var timer = setTimeout(function () {
$('body, html').animate({
scrollTop: prev.offset().top
}, 'slow');
prev.addClass('active')
.siblings().removeClass('active');
clearTimeout(timer);
}, 800);
}
}
});

To hide scrollbars of the browser (and thus to have the look of full page) apply overflow:hidden css-property to body like
$(document.body).css('overflow', 'hidden');
When you scrolled down via javascript to a section where the user should be able to scroll with standard scrolls just let scrollbar-handling be done automatically again by
$(document.body).css('overflow', 'auto');
So apply the first javascript-snippet whenever you scrolled via javascript to a fullpage view apply the latter everytime you scrolled to a normal scrollable section again.

Simple easing on bootstrap scrollspy

This is pretty simple question I think for those who knows javascript/jquery good. I am pretty new to all this and couldn't make it. I found code that is calculating the offset of navbar that looks like this:
var offset = 50;
$('.navbar li a').click(function(event) {
event.preventDefault();
$($(this).attr('href'))[0].scrollIntoView();
scrollBy(0, -offset);
});
And here is the fiddle example of what I have so far. As you can see if you click link in navbar it just skips to section. Where in this script to add easing so it scroll down a bit smoother?
With original code I found first I had that smooth scroll but with new script is lost. This is the old code:
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});

Plavookac Hi there.
I have set up a working sample here in this Fiddle for you.
When you place this code in your page, place it below all of you other js script links. or if you put this in a script link, place the link at the end.
I take it that you would already have the jquery link .
Have a look at this code here, you will see the smooth scrolling and the offset.
$(document).ready(function(){
// Add scrollspy to <body>
$('body').scrollspy({target: "#navbar"});
// Add smooth scrolling on all links inside the navbar
$("#navbar a").on('click', function(event) {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 60
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
});
});
Notice this line of code... event.preventDefault(); this is used to prevent that flicker when first clicked to start the scrolling.
This part of the code will handle the smooth scroll.
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top - 60
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
Does this help?

Prevent default action on location setting

I modified a pretty common jQuery smooth-scroll method to suit my needs better --- a function to scroll to an anchor:
function scrollToAnchor(id, offset) {
target = $(id);
$('html, body').stop().animate({
'scrollTop': target.offset().top + offset}, 900, 'swing', function () {
window.location = id;
});
}
I have the offset parameter to account for a fixed navigation pane at the top. I have the offset set to -100 on each call of scrollToAnchor so that it scrolls 100 pixels less (this allows the content to be displayed without the fixed navigation pane hiding any content).
My issue occurs with window.location = id;. This sets the URL to include the anchor, but because of this, it scrolls to the top of the div (this hides 100 pixels of content that my offset tries to prevent). I can't really use event.preventDefault() because I don't have any event parameter. Is there any way to prevent the window from scrolling when I set the location?

As you pointed out, it's the browser default behavior to scroll to the element specified by the anchor you add in the URL.
What if you changed the location before scrolling ?
Otherwise, you could use window.history.replaceState method which should modify the URL without scrolling.
However, bear in mind that's it is not supported in all browsers yet.