jQuery Smooth-Scrolling-Seite Laden

Bin ich über das jQuery-Skript zu tun mit Smooth-Scrolling (zu Finden auf der CSS-Tricks.com):

/** Smooth Scrolling Functionality **/
jQuery(document).ready(function($) {
  function filterPath(string) {
  return string
    .replace(/^\//,'')
    .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
    .replace(/\/$/,'');
  }
  var locationPath = filterPath(location.pathname);
  var scrollElem = scrollableElement('html', 'body');
  var urlHash = '#' + window.location.href.split("#")[1];

  $('a[href*=#]').each(function() {
    $(this).click(function(event) {
    var thisPath = filterPath(this.pathname) || locationPath;
    if (  locationPath == thisPath
    && (location.hostname == this.hostname || !this.hostname)
    && this.hash.replace(/#/,'') ) {
      var $target = $(this.hash), target = this.hash;
      if (target) {
        var targetOffset = $target.offset().top;
          event.preventDefault();
          $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {
            location.hash = target;
          });
      }
    }
   });  
  });

  //use the first element that is "scrollable"
  function scrollableElement(els) {
    for (var i = 0, argLength = arguments.length; i <argLength; i++) {
      var el = arguments[i],
          $scrollElement = $(el);
      if ($scrollElement.scrollTop()> 0) {
        return el;
      } else {
        $scrollElement.scrollTop(1);
        var isScrollable = $scrollElement.scrollTop()> 0;
        $scrollElement.scrollTop(0);
        if (isScrollable) {
          return el;
        }
      }
    }
    return [];
  }

});
/** END SMOOTH SCROLLING FUNCTIONALITY **/

Es funktioniert fantastisch, außer einer Sache, ich will, dass es funktioniert, wo, wenn jemand geht direkt an die url z.B. http://domain.com/page.html#anchor es glatt Schriftrollen, die den Anker von oben auf der Seite geladen, jetzt geht es sofort an die Seite verankern, es sei denn, Sie haben geklickt, der auf einen Anker. Ich hoffe, das macht Sinn.

InformationsquelleAutor Talon | 2013-05-14

jquery

25

Wenn es nicht zu spät für die Antwort dann hier gehen Sie....
Hier ist eine änderung des PSR ist der code, der tatsächlich funktioniert für glatte scrollen von Seite zu laden:

http://jsfiddle.net/9SDLw/1425/
```
$(function(){
    $('html, body').animate({
        scrollTop: $( $('#anchor1').attr('href') ).offset().top
    }, 2000);
    return false;
});
```
Bessere version:

http://jsfiddle.net/9SDLw/1432/
```
$(function(){
    $('html, body').animate({
        scrollTop: $('.myclass').offset().top
    }, 2000);
    return false;
});
```
Alles, was Sie tun müssen, ist dieses Skript zu ersetzen, das "myclass" mit einer Klasse oder ID der Steuerung, die sich auf die Seite, die Sie wollen, scrollen Sie zu.

Naveed
- Dies ist zwar gut, es beantwortet nicht die Frage direkt. Der OP wollte auf glatten Blättern Sie zu der id, die ist speziell in der hash-url: example.com/#example
InformationsquelleAutor Naveed

Ich fand, dass dies der beste Weg, das zu tun, was ich will so weit:

/** Smooth Scrolling Functionality **/
var jump=function(e)
{
    //alert('here');
   if (e){
       //e.preventDefault();
       var target = jQuery(this).attr("href").replace('/', '');
   }else{
       var target = location.hash;
   }

   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });

}

jQuery('html, body').hide();

jQuery(document).ready(function($)
{
    $(document).on('click', 'a[href*=#]', jump);

    if (location.hash){
        setTimeout(function(){
            $('html, body').scrollTop(0).show();
            jump();
        }, 0);
    }else{
        $('html, body').show();
    }
});
/** END SMOOTH SCROLLING FUNCTIONALITY **/

Es funktioniert und das ist genau das, was ich will.
Es ist für mich arbeiten. Danke.

InformationsquelleAutor Talon

2

@ Talons post ...

Ich fand, dass dies der beste Weg, das zu tun, was ich will so weit:

Mir 2, aber ich musste ein paar änderungen vornehmen.
```
var target = jQuery(this).attr("href").replace('/', '');
```
1. Warum ersetzen Sie den "/"?

In meinem Fall macht es die url...

"http://[meine domain]/[meine Seite]/[mein Anker]" ...sehen aus wie...

"http:/[meine domain]/[meine Seite]/[mein Anker]"

und...

2. Chrome (meine aktuelle version: 40.0.2214.115 m) nicht in einer Zeile wie der folgenden...
```
   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });
```
Uncaught Error: Syntax Error, unrecognized expression: http:/[meine domain]/[meine Seite]/[my anchor]

Fand ich heraus, dass jQuery nicht mit "offset", wenn "target" ist ein full-href-http://.../#Anker.

zu beheben 1.

ersetzt:
```
var target = jQuery(this).attr("href").replace('/', '');
```
mit:
```
var target = jQuery(this).attr("href");
```
zu beheben 2.

ersetzt:
```
   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500,function()
   {
       //location.hash = target;
   });
```
mit:
```
if(target.search('/') === -1) { //only do scroll if page with anchor is the currently loaded page
   jQuery('html,body').animate(
   {
       scrollTop: (jQuery(target).offset().top) - 100
   },500"easeInOutExpo"); //requires easing
}
```
Funktioniert nun bei mir perfekt, ohne Fehler.
Bitte kommentieren Sie diese ein, denn ich bin noch sehr neu in js/jquery...

thx @Talon
- Danke, das ist einige gute Verbesserungen
InformationsquelleAutor Bloghopper
0

Können Sie tun, indem Sie mit .scrollTop()
```
$('a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 2000);
    return false;
});
```
SIEHE HIER
- Das funktioniert ähnlich wie die Funktion in meiner Frage, aber es löst nicht das problem, wenn Sie navigieren Sie direkt zu der Anker-Domäne (domain.com/page.html#anchor geht es sofort zu dem Anker, wenn Sie geben Sie in die url eher als smooth-scrolling zu.
- Sie können animieren, für das
- ich aktualisierte mein code jetzt überprüfen Sie es einmal .Es ist die Arbeit, wie Sie jetzt erforderlich
- siehe hier jsfiddle.net/9SDLw/961
- ist es dein problem gelöst hat
- Nein, nicht wirklich Leid, es wird nur aktiviert, klicken Sie auf, Bedarf zu aktivieren, sowohl auf der Seite zu laden und klicken Sie auf.
- sorry .Ich weiß, dass
InformationsquelleAutor PSR

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.