I have linked to jQuery like so <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> and included the following script:
$(document).ready(function(){
$('.myLinkToTop').click(function () {
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
return false;
});
$('.myMenuLink').click(function () {
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})
But the script will only work in Firefox, and not Opera, Chrome or Safari. Is there anything I'm missing out?
Related
I am using the to top arrow in website to move to the top section with smooth scroll.. Now its moving to top but not moving in smooth..
The js that i used to get smooth scroll was
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
BUt its not working..
The jsfiddle was https://jsfiddle.net/36m5kp00/
The jquery's that i have used was,
<script src="scripts/controllers/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Use this
$(function() {
$('a.page-scroll').bind('click', function(event) {
$("html, body").animate({ scrollTop: 0 }, 1500);
event.preventDefault();
});
});
Actually you need to add the jquery easing plugin if you want to use custom easing methods like easeInOutExpo.
Note: jQuery comes with 2 easing methods linear & swing. Reference here: https://api.jqueryui.com/easings/
Here you can get it from: https://cdnjs.com/libraries/jquery-easing
It works well, Check it here: https://jsfiddle.net/ashishanexpert/36m5kp00/4/
Your working code should be like:
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#letTop:hidden').stop(true, true).fadeIn();
} else {
$('#letTop').stop(true, true).fadeOut();
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
i´ve created this little menu demo and it works fine on firefox and Chrome. But the function (".class").cick( function() does nothing at IE and Safari.
Maybe someone can help? I´ve tried .live .on("click",".class") etc.. nothing works.
you need to scratch the menu like this
CODE (Javascript)
/*Desktopvariante*/
if ((($(window).width() > 970) && test == 90) || (($(window).width() > 970))) {
$(function () {
$(".ClickLevel1").click(function () {
$(this).addClass("activeFarbe");
$(".navLevel1").addClass("activePfeil", 400);
$("#listLevel1").show("slide", {direction: "right"}, 350);
return false;
});
});
$(function () {
$(".ClickLevel2").click(function () {
$(this).addClass("activeFarbe");
$(".navLevel2").addClass("activePfeil",400);
$("#listLevel2").show("slide", {direction: "right"}, 350);
return false;
});
});
$(function () {
$(".ClickLevel3").click(function () {
$(this).addClass("activeFarbe");
$(".navLevel3").addClass("activePfeil",400);
$("#listLevel3").show("slide", {direction: "right"}, 350);
return false;
});
});
}
}
problem solved
(screen.orientation.angle)
cant be read by safari and IE
Hi i have big problem with
$(window).load(function() { // this not working in chrome
and
$(document).load(function() { // this not working in firefox
if i use the first it will not be fired in chrome
if i use the second it will not be fired in firefox
How to fix that ?
im trying to do the scroll the page like that
<script type="text/javascript">
$(document).load(function() {
$("html, body ").animate({ scrollTop: $(document).height() }, 10);
});
$(document).ready(function () {
// some othe code here which doesnt affect anything just to show that im using document ready here
});
</script>
If someone wonder , im also changing this $(window).height() in the code to document
EDIT
$(document).load(function() {
$("html, body , #mydiv1,#mydiv2").animate({ scrollTop: $(document).height() }, 10);
});
$(document).ready(function () {
var $window = $(document),
$stickyEl = $('#listholder'),
elTop = $stickyEl.offset().top;
$window.scroll(function() {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
});
scroll("#mydiv1,#mydiv2");
});
I am making a website. I am doing responsive menu and jQuery script work but not good. I mean that every single script wokrs very well but all of them together don't want to work that good. The first one, this from responsive menu is killing every thing, so this menu is not working as it should be :/
<script type="text/javascript" src="jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="jquery.sticky.js"></script>
<script>
$(document).ready(function(){
$(".menu-trigger").click(function(){
$("#mainnav").slideToggle(900);
});
});
jQuery(function($)
{
//zresetuj scrolla
$.scrollTo(0);
$('#link').click(function() { $.scrollTo($('#zjazd'), 2000); });
}
);
$(document).ready(function(){
$("#container").sticky({topSpacing:0});
});
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn('slow');
} else {
$('.scrollup').fadeOut('fast');
}
});
//Kliknij aby przewinąć do góry
$('.scrollup').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
</script>
So what is wrong? What is going om? I'm still learning and it can be really silly problem but for today for me...
All website is responsive already.
You can see here what's wrong
When I delete rest of scripts and leave only this for responsive menu it works beautiful, when I delete this for responsive menu then all rest works well, but when all scripts are together then only this for menu works not well but rest of it works normal. I don't know what is going on.
I'm still learning... and the website which I'm working od is pretty good.
You only need one $(document).ready(function() { });
And the first thing inside of it should be calling the plugins you want to use.
$(document).ready(function(){
$("#container").sticky({topSpacing:0});
$.scrollTo(0);
$(".menu-trigger").click(function(){
$("#mainnav").slideToggle(900);
});
$('#link').click(function() {
$.scrollTo($('#zjazd'), 2000);
});
$('.scrollup').click(function(){
$('html, body').animate({scrollTop : 0},1500);
return false;
});
});
$(window).scroll(function(){
if ($(this).scrollTop() > 400) {
$('.scrollup').fadeIn('slow');
} else {
$('.scrollup').fadeOut('fast');
}
});
I have a site where there is a called .slidingDiv which when the anchor .show_hide is clicked it appears and slides down which is great when it's the only content on the page.
If there is other content above this div it doesn't scroll down and show. Instead it shows the div but it is out of site, so it does actually work but not push the rest of the content up.
Here's the JQuery:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle(), 1000;
scrollTop: $(this).offset().top
});
});
</script>
Many thanks
Pete
Setting scrollTop in the callback of the slideToggle function or after the slideToggle function has been called (as you have did) results in jumpy behavior, at best. If you are looking for a smooth animation it is best to initiate the slide then animate the page to scroll down. This is demonstrated by this fiddle. Here is the js:
$(document).ready(function() {
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function() {
$(".slidingDiv").slideToggle(1000);
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top + $('window').height()
}, 2000);
});
});
Just make a check before scrollTop
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click',function(){
$(".slidingDiv").slideToggle(function(){
if($('.slidingDiv').height() > 0) {
$('html, body').animate({
scrollTop: $(".slidingDiv").offset().top
}, 1000);
}
});
});
});
</script>