drusso85 / ng2-scroll-to

angular 2 library to animate scrolling to anchor links.
MIT License
37 stars 18 forks source link

Not working in mozila firefox + angular 4 + cli 1.0.4 [ubutnu 16] #14

Open aminsmartsense opened 7 years ago

drusso85 commented 7 years ago

I made a test with the same configuration and it seems to work fine now. Can you provide me more information?

aminsmartsense commented 7 years ago
<main  id="v-scrollable" class="scrollable section" ng2-scrollable (elementVisible)="id = $event.id">
            <a [class.active]="id == 'home'" (click)="scrollTo('#home', '#v-scrollable')">Home</a>
            <a [class.active]="id == 'whatWeDo'" (click)="scrollTo('#whatWeDo', '#v-scrollable')">What We Do</a>
            <a [class.active]="id == 'whyForex'" (click)="scrollTo('#whyForex', '#v-scrollable')">Why Us</a>
            <a [class.active]="id == 'packages'" (click)="scrollTo('#packages', '#v-scrollable')">Packages</a>
            <a [class.active]="id == 'blog'" (click)="scrollTo('#blog', '#v-scrollable')">Blog</a>
            <a [class.active]="id == 'faq'" (click)="scrollTo('#faq', '#v-scrollable')">FAQ's</a>

<section id="home"></section>
<section id="whatWeDo"></section>
<section id="whyForex"></section>
<section id="packages"></section>
<section id="blog"></section>
<section id="faq"></section>

=================package.json=============

"dependencies": {
    "@angular/animations": "^4.1.3",
    "@angular/common": "^4.1.3",
    "@angular/compiler": "^4.1.3",
    "@angular/core": "^4.1.3",
    "@angular/forms": "^4.1.3",
    "@angular/http": "^4.1.3",
    "@angular/material": "^2.0.0-beta.5",
    "@angular/platform-browser": "^4.1.3",
    "@angular/platform-browser-dynamic": "^4.1.3",
    "@angular/router": "^4.1.3",
    "core-js": "^2.4.1",
    "ng2-auto-complete": "^0.12.0",
    "ng2-scroll-to": "^1.0.7",
    "ng2-toastr": "^4.0.1",
    "ngx-pagination": "^3.0.0",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.0.4",
    "@angular/compiler-cli": "^4.1.3",
    "@types/jasmine": "2.5.38",
    "@types/node": "~6.0.60",
    "codelyzer": "~2.0.0",
    "jasmine-core": "~2.5.2",
    "jasmine-spec-reporter": "~3.2.0",
    "karma": "~1.4.1",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^0.2.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "ng2-scrollable": "^0.8.0",
    "protractor": "~5.1.0",
    "ts-node": "~2.0.0",
    "tslint": "~4.5.0",
    "typescript": "~2.2.0"
  }
drusso85 commented 7 years ago

thank you. i will try to fix this issue this evening after work.

aminsmartsense commented 7 years ago

@drusso85 I am waiting for your next release. Please look in to this issue.

Thanks

drusso85 commented 7 years ago

the html provided is not based on this module; anyway i made a test based on your package.json and it works.

<!-- HTML  -->
<main id="v-scrollable" class="scrollable section" (elementVisible)="id = $event.id">
  <div style="position:fixed; top:0">
    <a scrollTo [class.active]="id == 'home'" href="#home">Home</a>
    <a scrollTo [class.active]="id == 'whatWeDo'" href="#whatWeDo">What We Do</a>
    <a scrollTo [class.active]="id == 'whyForex'" href="#whyForex">Why Us</a>
    <a scrollTo [class.active]="id == 'packages'" href="#packages">Packages</a>
    <a scrollTo [class.active]="id == 'blog'" href="#blog">Blog</a>
    <a scrollTo [class.active]="id == 'faq'" href="#faq">FAQ's</a>
  </div>

  <section id="home" style="height:500px">home section</section>
  <section id="whatWeDo" style="height:500px">wwd section</section>
  <section id="whyForex" style="height:500px">whyForex section</section>
  <section id="packages" style="height:500px">packages section</section>
  <section id="blog" style="height:500px">blog section</section>
  <section id="faq" style="height:500px">faq section</section>
</main>
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { ScrollToModule } from 'ng2-scroll-to';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    ScrollToModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
aminsmartsense commented 7 years ago

@drusso85 Can you give me your skype ID please? I can share screen with you so.

Thank you

drusso85 commented 7 years ago

I am very busy with work in this period so is very difficult for me to schedule a call. If you create a github project, I'll take a look after work.