I have been working on a Bootstrap 3 page which scrolls using scrollspy and a jquery plugin. I have an unfortunate flickering issue when the page is scrolling to the desired link.
Edit: it was partially solved by the lovely lady below i.e. I had been stupid in some markup. however the flickering problem remains.
I have a fiddle that Illustrates the current problem here
here is is the scrolling javascript
$(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();
});
});
Its odd and I have no idea what is causing it (still a student)
Anyone else experience this? would be great to know how you overcame it
Thanks in advance
Related
Hi i added smooth scrolling in my website, but apparently it does just work in one pagers. How can i fix it,so it works in a absolut position element, which is scrollable? Link from my website and the javascript file.
$('a[href^=#]').on('click', function(e){
var href = $(this).attr('href');
$('html, body').animate({
scrollTop:$(href).offset().top
},'slow');
e.preventDefault();
});
Ok i solved my problem. I just used a plugin called scrollTo:
https://github.com/flesler/jquery.scrollTo
After all the solution was pretty simple.
I'm implemented a pure css parallax effect in my website. Next step was to implement the scrollTop functionality the site is a one page layout.
$(document).ready(function($) {
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('#container').animate({
scrollTop: $target.offset().top
}, 2000);
});
});
With this I get a strange behavior:
initial start, click on anchor -> it scroll to the div
click on another anchor -> it does what it does not what it should
here the jsFiddle for you: https://jsfiddle.net/5pwctshp/2/
after some research could it be the overflow property that trigger the bug/problem?
Thank's in advance
I've been putting together a personal project. I'm relatively new to Java so picking it up as I go along.
Basically I have created a site which has sections I want accessible along both the x and y axis.
I have made these sections accessible using anchor links, so the site does link to these div's.
I have also managed to set up the Vertical smooth scroll animation. So my page can auto scroll up and down seamlessly using the following code:
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
However I can't seem to get the same scroll affect to apply for the div's located left/ right. what I want to happen is if I click a link which should go to a Div located to the left or right (off screen) it does a similar seamless smooth scroll left or right while keeping the same up/down animation.
Basically I want to apply both vertical and Horizontal smooth scrolling on the same page.
What changes or additions do I need to make to apply this?
I managed to implament horizontal scrolling on my site by making some tweaks to the above code.
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollLeft': $target.offset().left
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
This seems to work with horizontal scrolling. Now I need to make these work together at the same time...
I've added both to a seperate file and referenced them in my HTML. However now only the horizontal works. Anyway to make both work at the same time?
I managed to find an answer for this in the end and will post it up for future reference and aid.
Basically when I say I want to use both vertical and horizontal auto scroll I'm not talking about auto scrolling diagonally. I simply mean I have multiple links on a single page. Some which should auto scroll to a different section along the Y axis and some which auto scroll along the X axis.
So to do this I created 2 Js files with the following code and referenced them in my html. I also defined a class on all my links to specify which js file should be associated. e.g. 'up' was for my up/down auto scroll;
Vertical Scroll:
$(document).ready(function(){
$('a.up').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 3000, 'swing', function () {
window.location.hash = target;
});
});
});
Horizontal scroll:
$(document).ready(function(){
$('a.left').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollLeft': $target.offset().left
}, 3000, 'swing', function () {
window.location.hash = target;
});
});
});
HTML for assigning a class to a link;
<a class="up" href="#tutorial">Link</a>
Class referenced in js file as shown above;
$('a.up').on('click',function (e)
The problem I was having is as follows. The vertical and horizontal codes conflicted. Both of them used;
$('a[href^="#"]').on('click'
Which meant when a link was clicked it performed the action. There was nothing to distinguish which direction the action should go when the link was triggered.
by changing this to;
$('a.up').on('click'
and introducing classes to my links I could specify which links should trigger which JS file and work as expected.
I hope this helps anyone with a similar problem or just looking for some aid with auto scrolling.
Feel free to ask questions. :)
I'm trying to get a smooth scroll effect for my anchor links on a clients website. For some reason the anchors stop working at all when I add the scroll code. I tried doing a pen with just a nav and the code and it worked fine, so it must be something else on my page causing the issue, help please??
http://codepen.io/anon/pen/dYegMK <-- its a bit barren but I had to delete the clients content for their privacy
(function($) {
$(document).ready(function() {
$(function() {
$('nav#cssmenu a').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: ($($anchor.attr('href')).offset().top - 95)
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
});
}(jQuery));
Try to use linear and swing easing.
You can find more info here Easing functions in jQuery
I'm trying to a create a vertically smooth scrolling website, using jQuery. I am using this JavaScript and this tutorial Smooth Scrolling Website to create the site.
But I'm having trouble with a fixed header, the scrolling works fine but it appears half way down the relevant div because the div is aligning to the top of the page, not just below the fixed header as I would like it too.
I've tried adding an offset to scrollTop but all hell breaks loose on the page, things appearing above the fixed header etc. Just a page mash-up really. If anybody could shed any light it would be greatly appreciated.
$(function() {
$('ul.menu a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
/*
if you don't want to use the easing effects:
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1000);
*/
event.preventDefault();
});
});
I've found this code on StackOverflow (+ $('.fixedheader').outerHeight()) and added it to my code (after scrollTop: $($anchor.attr('href')).offset().top) it does work but seems to have the opposite effect. Anybody know why?
I've solved this,
+ $('.fixedheader').outerHeight()
Should be
- $('.fixedheader').outerHeight()
So silly of me, cheers anyway guys.