Good Evening,
I have been trying to animate a scroll-feature when tapping on a button. Below you will find the code that isn't working, my question is why.
$(document).ready(function () {
$('a[href="#panel-body"]').on('click', function (event) {
if(this.hash !== "") {
event.preventDefault();
var hash = this.hash;
$("html, body").animate({
scrollTop: $(hash).offset().top
}, 800 function () {
window.location.hash = hash;
});
}
});
});
I have assigned a link with the href="#panel-body". Tried with different variants and searched for a solution, still haven't managed to solve it.
Thanks for the help in advance!
I just found out that you want to create Up Going Button, For do this use the code below :
$(document).ready(function () {
$('button').click(function () {
$('html, body').animate({
scrollTop: '0px'
}, 750);
});
});
Related
on my prestashop web page I have "one-page" homepage with anchors. I use class linkscroll and JS script:
$(document).ready(function() {
$('.onas').attr('id', 'onas');
});
$(".linkscroll a").on('click', function(event) {
if (this.hash !== "") {
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function() {
window.location.hash = hash;
});
}
});
On homepage everything working properly. But when I'm on product page, no action after click on this link. Href is: "index.php#onas"
In console I see error:
Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (20-12-x-500ml-ekolok.html:1197)
at HTMLAnchorElement.dispatch (core.js:39)
at HTMLAnchorElement.g.handle (core.js:39)
You can see here: https://ekolok.cz/ekolok/20-12-x-500ml-ekolok.html
Do you any solution how to repair it?
Thank you.
After comments I've edited code like this, but issue still appears:
$(document).ready(function(){
$('.onas').attr('id', 'onas');
$(".linkscroll a").on('click', function(event) {
if(this.hash) {
event.preventDefault();
var hash = this.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 1000, function(){
window.location.hash = hash;
});
}
});
});
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();
});
});
The problem
I have my html page, i am using a search engine like "Ctrl+F" created by me, i integrated a jquery plugin which highlights me all the result i searched for, and it adds the class ".highlight" to the elements it highlights, the thing is i want to scroll between them , each time i press the search button.
I tried this but it didn't work:
$(document).ready(function () {
$("#btnSearch").on("click", function () {
$('html, body').animate({
'scrollTop': $(this).closest(".highlight").position().top
});
});
});
Maybe this helps you...
$(document).ready(function () {
$("#btnSearch").on("click", function () {
$('html, body').animate({
'scrollTop': $(this).closest(".highlight").parent().scrollTop()+ $(this).closest(".highlight").offset().top - $(this).closest(".highlight").parent().offset().top,
});
});
});
I am creating a form where i have many child forms to submit,so i have used a jQuery functionality where each submit a msg will show at the top of the page ,now what i want,on each submit the page will scroll up to the div where that jQuery is calling .Here is my code
var url = "<%=addPersonalDetailsURL%>";
var type = "addPersonalDetails";
if(!($('#<portlet:namespace/>address1').val()=='' || $('#country').val()=='None' ||$('#<portlet:namespace/>primaryPhone').val()=='')){
jQuery.getJSON(url+"&address1="+address1+"&address2="+address2+"&country="+country+"&state="+state+"&city="+city+"&zip="+zip+"&skypeId="+skypeId+"&twitter="+twitter+"&primaryPhone="+primaryPhone+"&secondaryPhone="+secondaryPhone+"&type="+type, function(data) {
$('html, body').animate({
scrollTop: $(".success").offset().top
}, 800);
for(var z=0; z<data.applicationArray.length;z++){
applicationArray = data.applicationArray[z].split("$$##$$##");
address1 = applicationArray[0];
address2 = applicationArray[1];
city = applicationArray[2];
primaryPhone = applicationArray[3];
}
jQuery.getJSON is giving some result where on the basis i have to use that functionality.So can you tell how i should modify your solution
You should need to get your element's top position in the page and move the scroll to that position. Something like the code below:
jQuery(window).scrollTop(jQuery(".success").offset().top);
Note that the code above will move to the first .success position. If you have to reference a specific one, add the index in the selector, for example:
jQuery(window).scrollTop(jQuery(".success:eq(1)").offset().top);
You can do that with this function:
$("button").click(function () {
$('html, body').animate({
scrollTop: $(".whichElement").offset().top
}, 800);
});
Explanation:
If the button is clicked, we scroll the page to the element with class
whichElement and the duration of the scroll is 800ms.
Example:
$(".first-hey").click(function () {
$('html, body').animate({
scrollTop: $(".second-hey").offset().top
}, 800);
});
$(".second-hey").click(function () {
$('html, body').animate({
scrollTop: $(".third-hey").offset().top
}, 800);
});
$(".third-hey").click(function () {
$('html, body').animate({
scrollTop: $(".first-hey").offset().top
}, 800);
});
.divide {
height: 1300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="first-hey">First hey</button>
<div class="divide"></div>
<button class="second-hey">Second hey</button>
<div class="divide"></div>
<button class="third-hey">Third hey</button>
So, I'm quite new to javascript and building a site where I'm trying to have animated scrolls on the page.
To enable animated scroll to a link I'm using this code:
jQuery(document).ready(function ($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})();
To scroll to the top of the page I am using this code.
//<-- scroll top -->
var $top = jQuery.noConflict();
$top("#scroll-top").hide();
// fade in #scroll-top
$top(window).scroll(function () {
if ($top(this).scrollTop() > 150) {
$top('#scroll-top').fadeIn();
} else {
$top('#scroll-top').fadeOut();
}
});
// scroll body to 0px on click
$top('#scroll-top a').click(function () {
$top('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
They both work fine independently, but not together.
Can anybody help me find out why they conflict, and how to solve the conflict?
So, this is how I fixed my issue:
I removed the conflicting code " // scroll body to 0px on click " and instead use the animated scroll to anchor link to animate both functions, with a placed on top of the page as well.
jQuery(document).ready(function ($) {
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
})();
I works fine, but I am missing only one feature, that the javascript recognises internal links that start with anything else than #. Right now it doesn't recognise for example this link http://julebord.bedriftsdesign.no/julebord.html#julemeny. It only works if I use this: #julemeny