Brauchen Sie Javascript Hilfe für reibungslose Scrolling

Ich habe eine funktionierende "go to top" Schaltfläche in meinem Forum. Ich habe mich entschieden, mit dem folgenden Code zu gehen, da er die URL meines Forums in keiner Weise ändert, was wichtig ist. Im head Abschnitt:Brauchen Sie Javascript Hilfe für reibungslose Scrolling

<script> 
    function scrollWindow() { 
    var top = document.getElementById('goHere').scrollTop; 
    window.scrollTo(0, top); 
    } 
</script>

Die div innerhalb des Körpers ich gehen möchte:

<div id="goHere"></div>

Der Eingang:

<input type="image" onclick="scrollWindow()" value="Scroll" class="goTop" src="http://example.com/images/26.png" alt="" />

Es funktioniert gut und lässt meine URL sauber. Meine Fragen:

Kann mein JavaScript bearbeitet werden smooth scrolling auf die div ID zu ermöglichen (und wenn ja, würden Sie mir bitte mit den Änderungen helfen)?
Muss ich eine Verknüpfung zu einer externen jQuery-Datei herstellen, um dies zu erreichen?

Quelle

2016-06-30 Izzy-B

So wie möglich, es so einfach zu machen, hier ist es JQuery verwendet, siehe Geige http://jsfiddle.net/aq9ptz0L/2/

$("#button").click(function() { 
    $('html, body').animate({ 
     scrollTop: $("#goHere").offset().top 
    }, 2000); 
});

Hinweis in Ihrem <head> Abschnitt hinzufügen, wenn Sie nicht bereits JQuery:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Quelle

2016-06-30 22:12:28

Wow, das ist großartig! Funktioniert wunderbar und mein PHP ist zufrieden damit. Vielen Dank! Und danke, SaiKiran, für Ihre Arbeit auch. :) –

Ist das möglich, dass ich das glatte Scrollen der gesamten meine Website anwenden? Ich meine, wenn der Benutzer den Scroll-Knopf * seiner Maus dreht (oder sowieso die Scroll-Leiste der Seite ändert) *, möchte ich ein sanftes Scrollen. – stack

Ja Art von, aber es wäre ein komplettes anders Ansatz obwohl –

Dieses Skript anstelle des Skripts und Arbeits Geige hier Link

!function(e,t){"use strict";"function"==typeof define&&define.amd?define(t):"object"==typeof exports&&"object"==typeof module?module.exports=t():e.smoothScroll=t()}(this,function(){"use strict";if("object"==typeof window&&void 0!==document.querySelectorAll&&void 0!==window.pageYOffset&&void 0!==history.pushState){var e=function(e){return"HTML"===e.nodeName?-window.pageYOffset:e.getBoundingClientRect().top+window.pageYOffset},t=function(e){return.5>e?4*e*e*e:(e-1)*(2*e-2)*(2*e-2)+1},n=function(e,n,o,i){return o>i?n:e+(n-e)*t(o/i)},o=function(t,o,i,r){o=o||500,r=r||window;var u=window.pageYOffset;if("number"==typeof t)var a=parseInt(t);else var a=e(t);var d=Date.now(),f=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){window.setTimeout(e,15)},s=function(){var e=Date.now()-d;r!==window?r.scrollTop=n(u,a,e,o):window.scroll(0,n(u,a,e,o)),e>o?"function"==typeof i&&i(t):f(s)};s()},i=function(e){e.preventDefault(),location.hash!==this.hash&&window.history.pushState(null,null,this.hash),o(document.getElementById(this.hash.substring(1)),500,function(e){location.replace("#"+e.id)})};return document.addEventListener("DOMContentLoaded",function(){for(var e,t=document.querySelectorAll('a[href^="#"]:not([href="#"])'),n=t.length;e=t[--n];)e.addEventListener("click",i,!1)}),o}}); 

function scrollWindow() { 
    var top = document.getElementById('goHere'); 
    window.smoothScroll(top) 
} 

</script>

Quelle

2016-06-30 20:47:43

Ich bin dabei, Ihr Skript zu testen. Allerdings habe ich vergessen zu erwähnen, dass meine Datei PHP ist, also muss ich einige der Zitate zurückschneiden, um meine Seite zurück zu bekommen. –

"Kann mein JS so bearbeitet werden, dass ein reibungsloses Scrollen zur div ID möglich ist" - Ihr Code scrollt nach oben, nicht zum '

' –

Danke dafür; Ich werde es wieder versuchen. Es wurde in einer Echo-Anweisung im Kopf abgefangen (wo sich mein ursprüngliches JS befindet, also unterbrachen die Zitate die Seite. –

Brauchen Sie Javascript Hilfe für reibungslose Scrolling

Antwort

Verwandte Themen