Avatar billede filip_b_l Nybegynder
24. februar 2009 - 09:56 Der er 5 kommentarer

gøre window.scroll mere blød/smooth

Hej
Jeg har lavet en funktion som scroller til et sted på min side defineret af et nummer som ganges med 50px og det hele starter 300px nede... det fungerer smukt... men jeg vil gerne ha at den scroll derned stille (smooth om man vil), og ikke bare hopper derned... Jeg er ret noob til javascript... kan nogen mon hjælpe... det her er hvad jeg har af js...

function pageScroll(number) {
    var scrollto = 300+(number*50)
        window.scroll(0,scrollto);
}

og den køres med en <div onclick="pageScroll(2)">indhold (scroll hertil)</div>
Avatar billede filip_b_l Nybegynder
26. februar 2009 - 14:54 #1
er der ingen der kan hjælpe med det her...
jeg har fundet denne funktion som gør det, men mine javascript evner er simpelthen ikke ti ldet...

http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html
Avatar billede csvendsen Nybegynder
05. marts 2009 - 09:03 #2
Jeg er ved at lave en ny side til indtastning af kommentarer til mine sider:
http://carsten-svendsen.dk/Kommentarer.aspx

Hvis du tror at det kan hjælpe dig i gang, vil jeg godt ligge javascript koden, som håndterer scrolling, ind her.
Det er ganske vist scrolling i et 'div', men skulle være nemt at omskrive, hvis det er hele siden som skal scrolle.
Avatar billede filip_b_l Nybegynder
05. marts 2009 - 10:09 #3
jeg er ikke nogen javascript haj, så jo mere du kan hjælpe jo bedre. Men koden er da en god start!

KH
Filip
Avatar billede csvendsen Nybegynder
05. marts 2009 - 18:02 #4
Du bliver nok nødt til at lære lidt om javascript, hvis du er helt newbee. Men du kan jo prøve at kigge min kode igennem, og se om du kan gennemskue hvad der sker, så du kan tilpasse den dit behov.
Jeg har undladt Slider delen, så koden kun omhandler scrolling. Derfor skal du erstatte denne linie med den hastighed i msek. du ønsker scrolling :
speedset = 101 - bsSliderGetValue();
f.eks. speedset = 50;

// JavaScript kode til Scrolling.
// Globale variabler
var currentLoop = 0;
var endLoop;
var speedset;
var startLoop;
var timer;

//---------------------------------------------------------------
// Kaldes ved klik på knappen AutoScroll Button

function autoScrollButton()
{
  try
  {
  var comment = document.getElementById('comment');
  var sh = comment.scrollHeight;
  var oh = comment.offsetHeight;
  currentLoop = comment.scrollTop;
// Er der startet scroll tidligere startes fra denne placering 
  if (currentLoop === 0)
    startLoop = 1;
  else
    startLoop = currentLoop; 
   
  if (sh > 0) // Explorer
    endLoop = sh  - comment.clientHeight;
  else  // Mozilla, Safari
    endLoop = oh; 
   
    // Start Scroll down.
  autoScrollTo(true);
   
  }
  catch(e)
  {
  var er = e;
  } 
}
//---------------------------------------------------------------
// Kaldes når der skal scrolles fra top til bund
// eller bund til top.

function autoScrollTo(countUp)
{
  try
  {
  var comment = document.getElementById('comment');
  comment.scrollTop = startLoop;
  currentLoop = startLoop;
  // Hent værdi af Slider mellem 1 - 100;
  // Fratræk max.værdi +1 så kald til autoScrollTo ligger fra
  // 1 ms. til 100 ms.
  speedset = 101 - bsSliderGetValue();
  // Næste ScrollTop afhængig af om countUP er sand eller falsk
  // Dvs. der scrolles fra Top til Bund eller fra Bund til Top
  if (countUp) 
    {
    startLoop ++;
    // Forøg scroll interval afhængig af hastighed
    if (speedset < 80)
      startLoop ++;
    if (speedset < 60)
      startLoop ++;
    if (speedset < 40)
      startLoop ++;
    if (speedset < 20)
      startLoop ++;
    // Hvis der ikke er scrolled til bunden foretages nyt kald
    if (startLoop <= endLoop)
      timer = setTimeout('autoScrollTo(true)',speedset);
    }
  else
    {
    startLoop --; 
    // Forøg scroll interval afhængig af hastighed
    if (speedset < 80)
      startLoop --;
    if (speedset < 60)
      startLoop --;
    if (speedset < 40)
      startLoop --;
    if (speedset < 20)
      startLoop --;
    // Hvis der ikke er scrolled til Toppen foretages nyt kald
    if (startLoop >= endLoop)
      timer = setTimeout('autoScrollTo(false)',speedset);
    }
    }
  catch(e)
  {
  var er = e;
  } 
}

//---------------------------------------------------------------
// Kaldes ved klik på knappen AutoScroll Top

function autoScrollTop()
{
  try
  {
  var comment = document.getElementById('comment');
  var sh = comment.scrollHeight;
  var oh = comment.offsetHeight;
  currentLoop = comment.scrollTop;
  endLoop = 1;
  if (sh > 0) // Explorer
    {
// Er der startet scroll tidligere startes fra denne placering 
    if (currentLoop === 0)
      startLoop = sh - comment.clientHeight;
    else
      startLoop = currentLoop; 
    } 
  else  //Mozilla, Safari
    {
// Er der startet scroll tidligere startes fra denne placering 
    if (currentLoop === 0)
      startLoop = oh;
    else
      startLoop = currentLoop; 
    } 
   
    // Scroll down every x milliseconds
  autoScrollTo(false);
  }
  catch(e)
  {
  var er = e;
  } 
}
//-------------------------------------------------------------

// Kaldes når bruger klikker i div med indlæg eller
// ved mousedown, dvs. vælger at scrolle manuelt.
function commentClick()
{
  try
  {
  // Stop timer når bruger klikker på div med indlæg
  // eller scroller manuelt i scrolling bar.
  clearTimeout(timer);
  }
  catch(e)
  {
  var er = e;
  }
}
Avatar billede csvendsen Nybegynder
06. marts 2009 - 07:48 #5
Jeg har skrevet javascript koden om, så den håndterer scroll ned og op i samme funktion. Se venligst bort fra den første...

// Globale variabler
var endLoop;
var speedset;
var startLoop;
var timer;

//---------------------------------------------------------------
// Kaldes ved klik på knappen AutoScroll Top eller Button
// Parameter scrollUp er sand hvis scroll skal ske
// fra bund til top, og falsk hvis scrolling fra top til bund

function autoScroll(scrollUp)
{
  try
  {
  var comment = document.getElementById('comment');
  var scrollHeigth = comment.scrollHeight;
  var offsetHeight = comment.offsetHeight;
// Er der startet scroll tidligere startes fra denne placering 
  startLoop = comment.scrollTop;
   
  if (scrollHeigth > 0) // Explorer
    endLoop = scrollHeigth - comment.clientHeight;
  else  //Mozilla, Safari
    endLoop = offsetHeight; 
 
  // Set endLoop = 1 (top) hvis scroll fra bund til top 
  // og
  if (scrollUp)
    {
    endLoop = 1;
    }
  // Scroll ned eller op hver 1-100 millisekund.
  autoScrollTo(scrollUp);
  }
  catch(e)
  {
  var er = e;
  } 
}
//--------------------------------------------------------------
// Kaldes når der skal scrolles fra top til bund.

function autoScrollTo(scrollUp)
{
  try
  {
  var comment = document.getElementById('comment');
  comment.scrollTop = startLoop;
  // Hent værdi af Slider mellem 1 - 100;
  var slidervalue = bsSliderGetValue();
  // Forøg scroll interval afhængig af hastighed og fjern decimaler med parseInt
  var scrollInterval = parseInt(slidervalue / 10,10) + 1;
 
  // Fratræk max.værdi +1 så kald til autoScrollTo ligger fra 1 ms. til 100 ms.
  speedset = 101 - bsSliderGetValue();

  // Næste ScrollTop afhængig af om scrollUP er sand eller falsk
  // Dvs. der scrolles fra Top til Bund eller fra Bund til Top
  if (scrollUp) 
    {
    startLoop -= scrollInterval; 
    // Hvis der ikke er scrolled til toppen foretages nyt kald
    if (startLoop >= endLoop)
      timer = setTimeout('autoScrollTo(true)',speedset);
    else
      comment.scrollTop = 1; 
    }
  else
    {
    startLoop += scrollInterval; 
    // Hvis der ikke er scrolled til bunden foretages nyt kald
    if (startLoop <= endLoop)
      timer = setTimeout('autoScrollTo(false)',speedset);
    }
    }
  catch(e)
  {
  var er = e;
  } 
}

//-------------------------------------------------------------

// Kaldes når bruger klikker i div med indlæg eller
// ved mousedown, dvs. vælger at scrolle manuelt.
function commentClick()
{
  try
  {
  // Stop timer når bruger klikker på div med indlæg
  // eller scroller manuelt i scrolling bar.
  clearTimeout(timer);
  }
  catch(e)
  {
  var er = e;
  }
}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester