Develop Reference

On scroll take to specific location with jquery or javascript?

I'm not too sure how to describe this with words; but what I am planning to do is something like what this website has achieved: http://sapia.com.pe/
When you scroll down, it takes you to a specific point of the page, as well as when you scroll up. How could I do this using Jquery? Would any plugins be needed?

Check the SNIPPET below it will give you basic idea how it can be achieved
or you can use plugins like fullpage
var arr = ['_a','_b','_c'];
var i=0;
var doing=false;
$(window).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta > 0) {
if(i==-1) i=2;
if(!doing){
$('html, body').animate({
scrollTop: $("#"+arr[i--]).offset().top
}, 600,function(){doing=false;});
doing=true;
}
}
else{
if(i==3) i=0;
if(!doing){
$('html, body').animate({
scrollTop: $("#"+arr[i++]).offset().top
}, 600,function(){doing=false;});
doing=true;
}
}
});
body{
overflow: hidden;
}
.section,html,body{
width:100%;
height:100%;
}
.a{ background-color:red; }
.b{ background-color:yellow; }
.c{ background-color:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="_a" class="section a"></div>
<div id="_b" class="section b"></div>
<div id="_c" class="section c"></div>

Loading the right url with anchors and jquery on one page

I'm having an issue when i'm loading the pages on my website. The main page has anchors since it's a one page, however i wanted to add a blog so i made it a two pages website. The url looks like mywebsite.com#content But now when I'm on the blog and I'm trying to get back to the main page, but the url loads like that : mywebsite.com/blog#content.
So i'd like the url to look like that : mywebsite.com/#content, but i don't know if that's possible...
Here is the html for the links :
<li>Accueil</li>
<li>Projets</li>
<li>A propos</li>
<li>Contact</li>
<li>Blog</li>
To make a smooth scroll effect on the main I used the following jquery :
var scroll = {
scrollTo : function () {
var page = $(this).attr('href'); // Target page
var speed = 750; // Animation duration
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
return false;
} // attribute scrollTo
}; // object scroll
$('.js-scrollTo').on('click', scroll.scrollTo);
Is there a way to make the url this way : mywebsite.com/#content and still have the scrolling effect with jquery ?

Simple use e.preventDefault instead of return false. Also, add a control to check if your "anchor page" exists in the dom.
Example with external page: https://www.vixed.it/st/43002103
Anyway I think is better to change the name of your function, can create a misunderstand with jQuery scroll and scrollTo.
Don't forget that li tags should contains the a and and not the opposite.
var scroll = {
scrollTo : function (e) {
var page = $(this).attr('href');
if ($('div.page'+page).length) {
e.preventDefault();
var page = $(this).attr('href');
var speed = 750;
$('html, body').animate({scrollTop: $(page).offset().top}, speed);
} else {
location.href='/'+page; //your home url + #page
}
}
};
$('.js-scrollTo').on('click', scroll.scrollTo);
a{color:#09C}
.nav{
list-style:none;
position:fixed;
top:0;
right:0;
width:100%;
background:#000;
margin:0;
padding:5px 0;
}
.nav li{
display:inline;
margin:0 5px;
}
.page{
min-height:200px;
padding:35px;
border:1px solid #CCC;
}
<ul class="nav">
<li>Accueil</li>
<li>Projets</li>
<li>A propos</li>
<li>Contact</li>
<li>Blog</li>
</ul>
<div id="homepage" class="page">Accueil</div>
<div id="projects" class="page">Projets</div>
<div id="about" class="page">A propos</div>
<div id="contact" class="page">Contact</div>
<div style="height:1000px;">Footer</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Horizontal scrolling upon button click (viewport + scrollLeft)

I am pretty sure it's a very very easy question, but even after several hours of reading through Stackoverflow/Google.. still no luck.
I have a horizontal scrolling website, works great. Now i've added two buttons at the bottom of the screen (left/right).
If a visitor clicks on the 'right' button, i want the whole page to scroll to the next 'section', which is exactly $(window).width() pixels to the right.
My idea was to add so jquery that upon clicking the button ScrollLeft: $(window).width() + $(window).ScrollLeft().
Theoretically this would start with the first click scrolling rightwards exactly the width of the viewport. the 2/3/4 click it would start at the current ScrollLeft() position and once more add the viewport width.
the jquery that i use for this is the following (most likely it's somewhat bloated, jquery is not my strongsuit)
I've tried defining variables, break it down further etc. All to no avail.
$(".right a").on("click", function(event) {
event.preventDefault();
$("html, body").animate({
scrollLeft: $(window).scrollLeft() + $(window).width()
}, "slow"); //Animates the scroll
});
$(".left a").on("click", function(event) {
event.preventDefault();
$("html, body").animate({
scrollLeft: $(window).scrollLeft() - $(window).width()
}, "slow"); //Animates the scroll
});
-edit-
as requested here the HTML markup.
The articles inside #horz-wrap are actually scrolling.
<div class="sitewrap">
<div class="portfolio-wrapper">
<section id="horz-wrap">
<article class="post">
<!--section here-->
</article>
<article class="post">
<!--section here-->
</article>
</section>
</div>
<ul class="horz-nav">
<li class="left"><</li>
<li class="right">></li>
</ul>
--edit 2--
Upon request I just uploaded the page, live version: http://lauretf35.thirtyfive.axc.nl/laurens/test.html
Thanks!

Here's the change you need, you may still need some fix but this will help with scrolling.
JavaScript
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('table').animate({
scrollTop: target.offset().top - 100
}, 1000);
return false;
}
}
});
});
CSS:
table {
border-collapse: collapse;
border-spacing: 0;
position: absolute;
top: 200px;
width: 100%;
display: inline-block;
}

Bring an element to top of the page even if the page does not scroll

Background:
Let's say you have a simple page which has a logo and a heading only and one paragraph
<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>
This is how that looks like
That page, obviously would not have vertical overflow / scroll bar for almost even tiny scale mobile devices, let alone computers.
Question
How can you bring that heading to the top left of the screen and move the logo out of focus unless someone scrolls up? Open to using any JavaScript library and any CSS framework
Attempts:
Tried using anchors but they only work if the page already had a scroll bar and anchor was out of focus.
Tried window.scrollTo but that also requires the page to have scroll already
Tried $("html, body").animate({ scrollTop: 90}, 100); but that also doesn't work when the page doesn't have overflow
Notes:
Please note that adding some extra <br/> to induce an overflow is not the way to go, it can be done that way but that's a very ordinary workaround
Why is it needed?
Its for a form for mobile devices, simple requirement is to take the first field of the form to top of the page and hide the logo (one can scroll up if they wish to see it) so it doesn't take attention away. Not using jQueryMobile for this particular task.

If you want the user to be able to scroll up and see the logo, then the logo must be within the top boundary of the body tag, because anything outside of that tag will not be viewable. This means you cannot use negative margins or offsetting like that. The only way to achieve this is to have the page scroll to the desired location that is within the top boundary of the body tag. You can set the time for this event to one millisecond, but there will still be a 'jump' in the page when it is loaded. So, the logic is: first make sure the page is long enough to scroll to the right place, then scroll there.
//Change the jQuery selectors accordingly
//The minimum height of the page must be 100% plus the height of the image
$('body').css('min-height',$(document).height() + $('img').height());
//Then scroll to that location with a one millisecond interval
$('html, body').animate({scrollTop: $('img').height() + 'px'}, 1);
View it here.
Alternatively, you can load the page without the image in the first place. Then your form field will be flush with the top of the document. Then you could create the element at the top and similarly scroll the page again. This is a round-a-bout way of doing the same thing though. And the page will still 'jump,' there is no way around that.

Only CSS and anchor link solution
With a pseudo element :
--- DEMO ---
First :
set : html,body{height:100%;}
Second :
Choose one of your existing tags. This tag mustn't have a relatively positioned parent (except if it is the body tag). Preferably the first element in the markup displayed after the logo. For your example it would be the h1 tag. And give it this CSS :
h1:before {
content:"";
position:absolute;
height:100%;
width:1px;
}
This creates an element as heigh as the viewport area. As it is displayed under the logo, the vertical scroll lenght is the same as the logo height.
Third :
Give the first element after logo an id (for this example I gave id="anchor").
Then you can use a link like this your_page_link#anchor and you will automaticaly scroll to the anchor (logo outside/above the viewport).
This works whatever height the logo is.
link to editable fiddle
Full code :
HTML
<img src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1 id="anchor">Foo Bar</h1>
<p>ABC12345</p> Anchor link
CSS
html, body {
height:100%;
margin:0;
padding:0;
}
h1:before {
content:"";
position:absolute;
width:1px;
left:0;
height:100%;
}

You might need to add js functionality to hide the logo if user scrolls down but I guess following code will fullfill the first requirement.
Please see
<script src="js/jquery.js"></script>
<img id='logo' src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" style="display:none">
<h1>Foo Bar</h1>
<p>ABC12345</p>
<script type="text/javascript">
var p = $( "p:first" );
var isScrolled=false;
/* For Firfox*/
$('html').on ('DOMMouseScroll', function (e) {
isScrolled = true;
if(p.scrollTop()==0 && isScrolled==true){
$('#logo').css('display','block');
}
});
/* For Chrome, IE, Opera and Safari: */
$('html').on ('mousewheel', function (e) {
isScrolled = true;
if(p.scrollTop()==0 && isScrolled==true){
$('#logo').css('display','block');
}
});
</script>
I have referred this question to find solution.

You could use touchmove event to detect swipe up or down. This is my example. You can try it on mobile device.
<style>
#logo {
position: absolute;
top: -100%;
-webkit-transition: top 0.5s;
-moz-transition: top 0.5s;
-ms-transition: top 0.5s;
-o-transition: top 0.5s;
transition: top 0.5s;
}
#logo.show {
top: 0;
}
</style>
<script>
var perY;
var y;
$(window).on('touchmove', function(e) {
e.preventDefault();
y = window.event.touches[0].pageY;
if(!perY)
perY = y;
else
{
if(y > perY)
$('#logo').addClass('show');
else
$('#logo').removeClass('show');
perY = null;
}
});
</script>
<img id="logo" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png">
<h1>Foo Bar</h1>
<p>ABC12345</p>

This is the same problem i've encountered hiding the addressbar without the page overflowing. The only solution that fitted my needs was the following:
Set the min-height of the body to the viewportheight + your logo.
$('body').css('min-height', $(window).height() + 200);

This is a simple solution of getting the height of the contents to see if we can scroll to the part of the header, if not, we add height to the paragraph.
<img id="img" src="http://blog.stackoverflow.com/wp-content/uploads/StackExchangeLogo1.png" />
<h1 id="h" >Foo Bar</h1>
<p id="par" style="background:yellow;">
hello world
</p>
script:
function hola(){
var imgH = $("#img").outerHeight(true);
var titleH = $("#h").outerHeight(true);
var winH = $(window).height();
var parH = $('#par').outerHeight(true);
var contH = (imgH + titleH + parH);
var wishH = (imgH + winH);
console.log("wished height: " + wishH);
console.log("window height: " + winH);
console.log("content height: " + contH);
if(contH < wishH){
console.log("window is smaller than desired :(");
var newH = wishH - contH;
$("#par").height(parH + newH);
$(window).scrollTop(imgH);
}
}
Here is the working example:
http://jsfiddle.net/Uup62/1/

You may like this solution: http://jsfiddle.net/jy8pT/1/
HTML:
<div class="addScroll"></div>
<h1 class="logo"><img src="https://drupal.org/files/images/OQAAAI1PPrJY0nBALB7mkvju3mkQXqLmzMhxEjeb4gp8aujEUQcLfLyy-Sn4gZdkAas6-k8eYbQlGDE-GCjKfF5gIrUA15jOjFfLRv77VBd5t-WfZURdP9V3PdmT.png" height="100" alt="company logo"/></h1>
<h2>This is a sample page heading.</h2>
<p>This is a sample page text.</p>
JS:
function addScroll()
{
$(".addScroll").css({
"height": ($(window).height()+1) + "px",
"width": "100%"
});
}
$(document).ready(function(){
addScroll();
$(window).resize(function(){
addScroll();
});
$(window).scroll(function(){
if($(window).scrollTop() > 0)
{
$(".logo").animate({
marginTop: "-110px"
}, 500);
}
if($(window).scrollTop() == 0)
{
$(".logo").animate({
marginTop: "0"
}, 500);
}
});
});
CSS:
body
{
padding:0;
margin:0;
}
h1.logo
{
display:block;
margin:0 0 10px 0;
padding:0;
outline:0;
}
.addScroll
{
position:absolute;
display:block;
top:0;
left:0;
z-index:-1;
}

Parallax transition with subtle bounce between two anchors/divs

I'm trying to have just one link on my website that links to the 'below-the-fold area' that I'll have a simple contact form at; the idea is to have that link do a nice transition similar to js parallax and once it reaches the below the fold area it kind of subtly 'bounces' a few pixels back up. (The space between anchors is about 800px)
My attempts in the code below, but it's still just being read as an anchor-point without any transition. (Should I be loading a different jQuery library, or load them in a different order?)
Updated Attempt 12-16:
Calling in the head
Libraries being called:
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
Just About before closing head tag. (A few inline styles are right before closing </head> if matters)
<script type="text/javascript">
$('a').on('click', function (event) {
event.preventDefault();//stop the browser from jumping to the anchor
var href = $(this).attr('href'),
oset = $(href).offset().top;
$('html, body').stop().animate({
scrollTop : oset
}, 700, function () {
location.hash = href;
});
});
</script>
Mark-up, CTA divs
<div id="top" class="scrollpls"><img src="http://www.mysite.com/imgs/down_btn.png" border="0" style="float:right; margin-top:200px;"></div>
..and near bottom of doc
<div id="bottom" class="scrollpls"><a href="#top">
<img src="http://www.mysite.com/imgs/upsubway.png" style=" float: right;
float: right;
margin-right: -74px;
margin-top: 700px;
}"></a></div>
http://jsfiddle.net/Hpegt/1/
A fiddle created from an early Question regarding this function and states creating a style with the div height in it. Since declaring this for all divs as in the fiddle would break my layout, I tried it with a class
.scrollpls {
height : 500px;
border :0px solid #000;
}
What am I doing wrong here? After I someday get this, I'll be trying to figure out how to implement an 'ease' with a subtle bounce back after it navs to the points.
Thanks for any help

There are tons of built-in easing effects if you include jQueryUI.
Try this modification to your fiddle - http://jsfiddle.net/CzQXC/
$('a').on('click', function (event) {
event.preventDefault();//stop the browser from jumping to the anchor
var href = $(this).attr('href'),
oset = $(href).offset().top;
$('html, body').stop().animate(
{
scrollTop : oset
},
1000,
'easeInOutElastic',
function ()
{
location.hash = href;
}
);
});

Try this:
<script type="text/javascript">
$(function() {
// this should really be in a click handler, but just for an example:
$('html,body').animate({
scrollTop: $("#testtop").offset().top
}, 2000, 'bounce');
});
</script>
Note: the bounce parameter specifies the easing to use. This is part of jQueryUI so you'll need to download that and include it on your page for the effect to work properly.

For some reason it took a few minutes to function after I put the code in, but finally it resolved and I think this was the solution:
#top, #bottom {
height : 130px;
border : 0px solid #000;
overflow:hidden;
}