How to control the scrolltop javascript function? - javascript

I'm using the Pagify.js plugin, which helps create one page websites by using jquery to pull several html files inside a container div without the browser having to refresh the whole page.
The problem is that I'm trying to scroll to the nav bar div when a link is clicked, and I'm getting odd results. Here is the plugin and HTML jsfiddle. Here is the code I'm using to scroll (I'm not sure where to put it)
$('html, body').animate({scrollTop:$('#nav').position().top});
http://jsfiddle.net/5y9HT/
If I paste the scrollTop code in different places in the pagify.js, different things happen, none of which behave exactly right.
I'm trying to achieve a situation where it will scroll to the nav div if a link is clicked, but will not scroll if the browser is refreshed (it should already be there. Just like on this site: http://www.madebysofa.com/archive/index.html

I think you want #nav's offset, not it's position:
$('.content').on('click', 'a', function(a){
a.preventDefault();
$('content').get('newPage.html');
var nav_position = $('#nav').offset();
console.log(nav_position);
$(document).animate({
scrollTop: nav_position + 'px';
});
});
You might still be able to use your position().top in the same manner.
$('.content').on('click', 'a', function(a){
a.preventDefault();
$('content').get('newPage.html');
var nav_position = $('#nav').position().top;
console.log(nav_position);
$(document).animate({
scrollTop: nav_position + 'px';
});
});

try this,
$('html, body').animate({scrollTop:$('#nav').offset().top}, 1000);
you can also use document instead of specifying both 'html', and 'body'. Hope it works.

Related

Using a variable to set a ScrollTop with animate function

I have a series of divs that collapse and open and I'd like the browser to scroll to the top of the open divs.
I'm trying to do this using anchor links and having the anchor link saved in a variable "scrollClass" but my code is not working. When I test the console log however, it outputs exactly what I want it to output. I'm not sure if this is a syntax situation or not.
I'd appreciate any help that I can get here.
Thanks in advance.
<script>
$('.discover-btn-open, .discover-btn-open a').click(function(e) {
e.preventDefault();
var currentElement = $(document.activeElement);
var scrollClass = $(this).closest('.discover-inner').find('#discover- anchor').attr('href');
$(".discover-inner").removeClass("discover-inner-open");
$(this).closest(".discover-inner").addClass("discover-inner-open");
console.log(scrollClass);
$('html, body').animate({scrollTop: $(scrollClass).offset().top - 100}, 450);
});
$('.discover-close, .discover-close a').click(function(e) {
e.preventDefault();
$(this).closest(".discover-inner").removeClass("discover-inner-open");
});
</script>
You are setting attribute href to scrollClass and when you try to use it as an element it won't work. Try removing the attr("href") part and using the .offset then.
You could also just trigger the click on the anchor element you want to scroll to through jQuery.

Scrolling only horizontally is not working

I have HTML code with a table integrated with PHP Laravel. I'm getting data from Admin.php to my HTML. So the table is coming by a back-end code and is wider than the screen window. I have added a horizontal scroll bar to move it. I have added a link on back-end to move between <th> with hash href. The problem is when I click on the link, it is move to the particular <th> by scrolling horizontally as well as scrolling vertically.
Anchor tag in Admin.php:
$orderIdColumn .= '<br>Read notes >';
I added a jQuery in my HTML to prevent vertical scrolling:
$(document).ready(function()
{
$('.intro').bind('click',function(event)
{
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 100);
event.preventDefault();
});
});
Even after including this, the link is still vertically scrolling. However, after adding a static link in HTML and bind it with the above function, it is working. I guess the problem is the link is coming from back end, but not sure. How can I solve this?
This is a demo most likely what I'm trying to do. This code is working perfectly without any vertical scrolling. I don't understand why this is not working in my project.
http://jsfiddle.net/34r76ag8/21/
Just create a function in the HTML file and call it in the element in php page with onclick.
function scroll(){
var $anchor = $(this);
$('html, body').stop().animate({
scrollLeft: $($anchor.attr('href')).offset().left
}, 100);
event.preventDefault();
}
in php file
$orderIdColumn .= '<br>Read notes ';
Try to inspect with the chrome developer tool to verify that information received from the back-end is correct.
you can do this by doing the following : ctrl + shift + c (to open the inspector)

How to do something when scroll to content or content appear on window?

I have a lot of pictures on my page. and I want to do some javascript and PHP processing when the user scrolls down to each image. I have come up with the follwing:
$(window).scroll(function(){
hT = $('.Picture-1A:eq(3)').offset().top,
hH = $('.Picture-1A:eq(3)').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if ((wS >= (hT+hH-wH))){
alert('you have scrolled to the h1!');
}
});
The above example only works if I reach to a certain image. And I want to do something when the scroll reach an image. I want to get it's ID and process that in PHP using AJAX.
Let's assume that the following are the images:
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
<div class="Picture-1A"></div>
What I want to do is add 1 impression to the image that has appeared on the window. and I want to do that using AJAX every time the user scrolls down the page.
That's it
Update:
I have found a great library thanks to Eugenio Enko. and here is how it's done:
Include the library code in your project after jQuery:
If you want it to trigger for each image, then use each like so:
$('.Picture-1A').each(function() {
$(this).waypoint(function(direction){
alert($(this).html());
});
});
But I am having trouble getting the html of $(".Picture-1A").html() using this it returns undefiend
Here you can view an example using the old waypoint:
http://codepen.io/eugenioenko/pen/qZMqOW
$(document).ready(function(){
$('.spfx-scroll-p').waypoint(function(){
alert('scrolled');
},{offset:'90%'});
});
There are two libraries I know that could help you with that:
http://imakewebthings.com/waypoints/
http://scrollmagic.io/
The second one is more complete and has much more option, but for what you need, it seems that waypoint should work well enough.
best regards.

Using a parameter in URL to scroll to div (mimicking an anchor behavior)

I'm using a jQuery tabs plugin that uses anchors so that you can define which tab should be open by default.
But if the interface is below the fold, it doesn't scroll into view. I tried adding an anchor tag above the interface, but I can't get it to highlight the appropriate tab AND scroll into view.
Since I can't use two anchors, my thought was if I wanted to provide a link to scroll into view I could include a parameter in the URL, like this:
http://stage.ravencreative.com/scroll/Index.html?scrollto=Interface#parentHorizontalTab2
(where "Interface" might be the name of an anchor of id name at the top of the interface)
I googled and searched stackoverflow and couldn't find anything. Is there some sort of script that would allow this to work? Or is there a better way to do this?
Here's a working example:
http://stage.ravencreative.com/scroll/Index.html
This makes the second tab active:
http://stage.ravencreative.com/scroll/Index.html#parentHorizontalTab2
(#parentHorizontalTab2 is what makes the second tab open by default)
This scrolls to the tabbed interface:
http://stage.ravencreative.com/scroll/Index.html#Interface
(#Interface is the anchor at the beginning of the interface)
But I can't get both to work at the same time. Any suggestions? Is there a way to do something like:
http://stage.ravencreative.com/scroll/Index.html?scrollto=Interface#parentHorizontalTab2 where a script picks up on the scrollto parameter and scrolls to it?
Something like (I'm using English since I am not familiar with the code construct):
if scrollto is found in the URL
then scroll to the anchor defined in the scrollto
You can use a variety of #tabConditionSelector conditions as you described, then on document.ready you can read it and scroll / select and anything else on a case-by-case basis.
Using jQuery:
$( window ).load(function() {
var hash = window.location.hash;
if (hash == "#parentHorizontalTab2") {
var top = document.getElementById("Interface").offsetTop; //Getting Y of target element
window.scrollTo(0, top);
} else if (hash == "#parentHorizontalTab3") {
//select tab 3 etc
}
});
You can use this to scroll to specific location on load from link hash
$(window).load(function () {
var hash = window.location.hash;
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 'slow');
});

Trouble with an one page navigation - updating/highlighting active state and scroll to anchor

I'm already busy with a one page navigation. Below you will find more information about the problem and my wish.
How should it work?
Once a navigation item is clicked, scroll to its particular section and update the active class of the menu. And if the page is scrolled to its particular section, it should update the active state too - so change the class to its particular anchor.
Fixed header
For the website I also used a fixed header, so this should NOT be overlay the particular section. So the menu should stop scrolling when the bottom of the header is reaching the top of the section.
Variable sections
All sections on the one page design has a different height.
Problem
I have already tried a lot of code, to get it work. Most of the code is working, but this isn’t in all browsers the same. Also I have some trouble with updating the active state of the particular section - that match to the active anchor.
Code
I used jQuery to create a smooth scroll to anchor. You can see my working code at JSfiddle.
Here are all resources:
JS
Here I controle the click function of the navigation.
So when the user click a list item of #primary-navwrapper, then change the active state class and scroll to the particular section, that match with the clicked anchor.
$('#primary-navwrapper li').find('a[href^="#"]').click(function(event) {
// Prevent from default action to intitiate
event.preventDefault();
$('#primary-navwrapper li a').removeClass("current");
$(this).addClass("current");
// The id of the section we want to go to.
var anchorId = $(this).attr("href");
// Our scroll target : the top position of the
// section that has the id referenced by our href.
var target = $(anchorId).offset().top - offset;
//console.log(target);
$('html, body').animate({ scrollTop: target }, 500, function () {
//window.location.hash = '!' + id;
window.location.hash = anchorId;
});
});
Beside the click function, I also want that when the user scrolls around the one page, it will automatically update the active statement.
function setActiveListElements(event){
// Get the offset of the window from the top of page
var windowPos = $(window).scrollTop();
$('#primary-navwrapper li a[href^="#"]').each(function() {
var anchorId = $(this);
var target = $(anchorId.attr("href"));
if (target.length > 0) {
if (target.position().top <= windowPos && target.position().top + target.height() > windowPos) {
$('#primary-navwrapper li a').removeClass("current");
anchorId.addClass("current");
}
}
});
}
$(window).scroll(function() {
setActiveListElements();
});
In above code, I think that the line of if (target.position().top <= windowPos && target.position().top + target.height() > windowPos) isn’t correct and maybe to long..
If there are any questions or something, I like to hear from you.
Casper
Looking at your code, I've updated the line you said for the below one:
if (target.position().top - $('#header').outerHeight() <= windowPos) {
$('#primary-navwrapper li a').removeClass("current");
anchorId.addClass("current");
}
In this way, it'll get the target's difference to the top minus the header's height (as it will be always visible) and then check with the window's position. If it's inferior, the user has passed this anchor, so the correspondent link in the menu gets highlighted.
And your first link doesn't have its anchor in the fiddle, so:
<li>Home</li>
After these changes, everything seems to work fine.
JSFiddle: http://jsfiddle.net/8n06pvy9/17/
EDIT:
To update the hash, I've tried to use a simple window.location.hash = anchorId;, but it results in some weird scroll issues in FF and IE. I've spent some time on it, but I wasn't able to figure out what happens.
So, I suggest a trick that I've already used, using #! in the hash. In this way, your code would be like that:
window.location.hash = '#!' + anchorId.replace('#', '');
And in the scroll function, like that:
window.location.hash = '#!' + anchorId.attr('href').replace('#', '');
JSFiddle: http://jsfiddle.net/8n06pvy9/18/
And, if you want, you can check for the hash in pageload, remove the exclamation point and scroll the page to the desired anchor. Or, if you want to avoid all of that, you can always use some history plugins, like this one. In your case, I personally wouldn't use a plugin for that, but it's your call if it worth it or not.
Hope it helps!

Categories

Resources