Scroll naar Top of footer met klik

Status
Niet open voor verdere reacties.

lerrie

Gebruiker
Lid geworden
2 nov 2010
Berichten
300
Ik zoek een code waarmee ik op klik in 1 keer naar de top of footer van mijn website wordt gescrolled. Boven aan mijn website staat een klein navigatie menu met Home | Contact | Sitemap. Nu wil ik dat als mensen op contact klikken ze automatisch worden gescrolled naar mijn footer waar een contact formulier in staat. In dit formulier staat ook weer een link naar boven. Ook hier zoek ik een code voor. Weet iemand hoe dit moet?

groeten
 
Hoi lerrie,
Je kunt eens kijken op www.handleidinghtml.nl/html/hyperlinks/hyperlinks05.html.
Ze geven daar als voorbeeld voor de plek waarnaartoe gesprongen moet worden:
HTML:
<A NAME="inhoud"></A>
... dus met de name="..." eigenschap; maar met een ID gaat het net zo goed:
HTML:
<div id="footer">
   <p>Bla-die-bla, lorem porem, enz.</p>
</div>
Daar hoort dan als verwijzende link bij:
HTML:
<p><a href="#footer">Ga naar de voeter</a></p>
Met vriendelijke groet,
CSShunter
 
Weet er iemand hoe ik het sliden smooth kan maken? Nu schiet de site naar de top of footer kan ik deze geleidelijker laten lopen?
 
Daar zal wat javascript aan te pas moeten komen, denk ik.
  • Eerst met js laten uitrekenen hoeveel px een bepaald element vanaf de bovenkant zit. Geeft de waarde van een variabele (noemen we even "var scrollpoint").
  • Dan een loop maken met de functie scrollTo(x,y) er in, waarbij y steeds een pixel groter wordt totdat y=scrollpoint (of: kleiner, als je omhoog wilt laten scrollen).
  • Dat loopje een regelbare snelheid meegeven via setInterval.
Zoiets, lijkt me.

Met vriendelijke wensen,
CSShunter
 
Laatst bewerkt:
Daar zat ik ook aan te denken ik zal eens even kijken. Heb je misschien een tutorial ofzo? Ik kijk ook wel ff op google
 
Heb je misschien een tutorial ofzo? Ik kijk ook wel ff op google.
Ik heb geen tut, maar een Google op "smooth scrolling script" doet wonderen.
Ik heb er een stuk of 3 aangeklikt, en die deden het allemaal (verder niet gekeken, ook geen code bezichtigd).
Je kan de mooiste uitkiezen!:)
 
Laatst bewerkt:
Ok bedankt ik heb er 1 gevonden alleen krijg hem niet aan de praat. Ik heb het script in mijn pagina gezet en de .js file aangemaakt alleen hij werkt niet. Is er iets anders dat ik nog moet doen? De tutorial komt van deze site http://articles.sitepoint.com/article/scroll-smoothly-javascript

Dit heb ik tussen mij headtags gezet
<script src="smoothscroll.js" type="text/javascript"></script>

En dit is de smoothscroll.js file
[JS]/* Smooth scrolling
Changes links that link to other parts of this page to scroll
smoothly to those links rather than jump to them directly, which
can be a little disorienting.

sil, http://www.kryogenix.org/

v1.0 2003-11-11
v1.1 2005-06-16 wrap it up in an object
*/

var ss = {
fixAllLinks: function() {
// Get a list of all links in the page
var allLinks = document.getElementsByTagName('a');
// Walk through the list
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks;
if ((lnk.href && lnk.href.indexOf('#') != -1) &&
( (lnk.pathname == location.pathname) ||
('/'+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
// If the link is internal to the page (begins in #)
// then attach the smoothScroll function as an onclick
// event handler
ss.addEvent(lnk,'click',ss.smoothScroll);
}
}
},

smoothScroll: function(e) {
// This is an event handler; get the clicked on element,
// in a cross-browser fashion
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;

// Make sure that the target is an element, not a text node
// within an element
if (target.nodeName.toLowerCase() != 'a') {
target = target.parentNode;
}

// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != 'a') return;

// Find the <a name> tag corresponding to this href
// First strip off the hash (first character)
anchor = target.hash.substr(1);
// Now loop all A tags until we find one with that name
var allLinks = document.getElementsByTagName('a');
var destinationLink = null;
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks;
if (lnk.name && (lnk.name == anchor)) {
destinationLink = lnk;
break;
}
}
if (!destinationLink) destinationLink = document.getElementById(anchor);

// If we didn't find a destination, give up and let the browser do
// its thing
if (!destinationLink) return true;

// Find the destination's position
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}

// Stop any current scrolling
clearInterval(ss.INTERVAL);

cypos = ss.getCurrentYPos();

ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
ss.INTERVAL =
setInterval('ss.scrollWindow('+ss_stepsize+','+desty+',"'+anchor+'")',10);

// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
},

scrollWindow: function(scramount,dest,anchor) {
wascypos = ss.getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss.getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we've just scrolled past the destination, or
// we haven't moved from the last scroll (i.e., we're at the
// bottom of the page) then scroll exactly to the link
window.scrollTo(0,dest);
// cancel the repeating timer
clearInterval(ss.INTERVAL);
// and jump to the link directly so the URL's right
location.hash = anchor;
}
},

getCurrentYPos: function() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (window.pageYOffset)
return window.pageYOffset;
return 0;
},

addEvent: function(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent("on"+evType, fn);
return r;
} else {
alert("Handler could not be removed");
}
}
}

ss.STEPS = 25;

ss.addEvent(window,"load",ss.fixAllLinks);
// JavaScript Document[/JS]
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan