$(window).scroll event does not fire

Take a look at our YouTube channel and subscribe to be notified about new videos!

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

Take a look at some frequently asked questions about us and our products!

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Harald Schneider

I tried to implement some kind of elevator button, which allows the user to scroll back to top at the end of long lists or texts. The button should appear automatically after the user scrolled e.g. 100px downwards and disappear, if the list has reached its top again.

Example here: https://codepen.io/rdallaire/pen/apoyx

However, it looks like Angular supresses the scroll event: https://stackoverflow.com/questions/33600605/window-scroll-not-working-in-augular-controller

Do you see any chance to get this working? Or maybe add a custom control for this functionality?

DecSoft

Hello Harald,

Probably what happen is that we must adapt the code to our app. For example, copy the below text and save it as a file named "TopLink.ab". Open that file with App Builder and run the app. As you can see, there is no problem to use the code that you wanted (or better said, to get the results that you wanted) using an HTML control, for example. I am not sure, however, if you wanted something like this or other thing.

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.28">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Icon></Icon>
    <Width>320</Width>
    <Height>480</Height>
    <Scale>1</Scale>
    <Zoom>1</Zoom>
    <Theme>Default</Theme>
    <Themes></Themes>
    <Plugins></Plugins>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <LanguageCode>en</LanguageCode>
    <TextDirection>ltr</TextDirection>
    <Created>2019-04-03T14:01:48.472</Created>
    <Modified>2019-04-03T14:17:10.146</Modified>
    <BuildNumber>0</BuildNumber>
    <AutoBuildNumber>0</AutoBuildNumber>
    <InlineCSS>
      <![CDATA[#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}]]>
    </InlineCSS>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Android />
      <IOS />
      <Windows />
      <Phonegap>
        <CLIVersion>8.0.0</CLIVersion>
      </Phonegap>
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS
  $('#HtmlContent1').scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
  });

  $('#return-to-top').click(function() {      // When arrow is clicked
    $('#HtmlContent1').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
  });
EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="6001">
          <Name>HtmlContent1</Name>
          <Top>8</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>464</Height>
          <Style>overflow-y: auto; </Style>
          <Html>
            <![CDATA[<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut lectus nunc. Duis sit amet finibus sem, in auctor mauris. Donec commodo orci in egestas laoreet. Pellentesque posuere velit quis urna pellentesque, et blandit orci sagittis. Pellentesque sed magna congue, cursus mauris quis, venenatis enim. Phasellus ut porta arcu. Duis faucibus eu orci in tempor. Ut a tellus ac urna elementum convallis eu vel arcu. Nulla vulputate est in lectus gravida, in dignissim purus fermentum. Pellentesque elit turpis, sollicitudin non leo at, faucibus lacinia felis. Quisque dignissim eleifend lectus nec lobortis. Proin porta urna eu justo interdum dignissim. Nullam aliquet lacinia sapien, ut fringilla justo sagittis a. Duis ornare nisl nec lacus rhoncus ultrices.
</p>
<p>
Fusce porta orci ut ex tempor accumsan. Pellentesque mauris nulla, tincidunt vitae lectus eu, imperdiet venenatis lorem. Quisque in mauris ligula. In nisi velit, blandit non ultrices id, varius quis nibh. Quisque turpis risus, congue at nisi eu, posuere laoreet ligula. Phasellus fermentum lectus sit amet massa tristique, maximus mattis felis cursus. Duis congue, mauris non aliquet placerat, ex dui iaculis nunc, laoreet sagittis lectus metus at neque. Praesent mattis sed urna at pellentesque. In consequat suscipit ex, sit amet tempor felis dapibus sed. Morbi diam enim, dictum id pharetra a, imperdiet sit amet lectus. Curabitur nec dui tristique, vulputate turpis id, sodales elit. Praesent mi nisl, sodales placerat magna vitae, auctor interdum metus. Praesent sed molestie sapien, quis luctus ligula. Curabitur ac efficitur nulla. Curabitur convallis ante arcu, ut tempus lectus gravida sed.
</p>

<span id="return-to-top"><i class="fas fa-arrow-circle-up"></i></span>
]]>
          </Html>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.28 (4/1/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

The CSS code has been placed in the app's Inline CSS option. The Javascript (adapted) has been placed in the app's view Show event. Below is what you must see when run the app:

Purchase one or more licenses of our products if they are useful to you!

DecSoft

Hello Harald,

Here is another sample, this time scrolling the app's view itself, not an specific HTML Content control. Instead of refer to "window", we refer to ".appView", which is a class that all the views have. Take a look at the same parts than in the above sample.

<?xml version="1.0" encoding="utf-8"?>
<AppBuilder Version="2019.28">
  <App>
    <ID>com.appbuilder</ID>
    <Name>New App 1</Name>
    <ShortName>New App 1</ShortName>
    <Version>1.0.0</Version>
    <Icon></Icon>
    <Width>320</Width>
    <Height>480</Height>
    <Scale>1</Scale>
    <Zoom>1</Zoom>
    <Theme>Default</Theme>
    <Themes></Themes>
    <Plugins></Plugins>
    <Description>Another App Builder app</Description>
    <AuthorName>App Builder</AuthorName>
    <AuthorUrl>https://www.decsoftutils.com/</AuthorUrl>
    <AuthorEmail>info@decsoftutils.com</AuthorEmail>
    <LanguageCode>en</LanguageCode>
    <TextDirection>ltr</TextDirection>
    <Created>2019-04-03T14:01:48.472</Created>
    <Modified>2019-04-03T14:48:57.623</Modified>
    <BuildNumber>0</BuildNumber>
    <AutoBuildNumber>0</AutoBuildNumber>
    <InlineCSS>
      <![CDATA[#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    z-index: 99999;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}]]>
    </InlineCSS>
    <Metadata />
    <Webapp />
    <ProWebApp />
    <WebExtension />
    <Cordova>
      <General />
      <Plugins />
      <Android />
      <IOS />
      <Windows />
      <Phonegap>
        <CLIVersion>8.0.0</CLIVersion>
      </Phonegap>
      <Platforms />
      <Splash />
      <Config />
      <Paths />
    </Cordova>
  </App>
  <Views>
    <View>
      <Name>Master</Name>
      <IsMaster>1</IsMaster>
      <Controls />
    </View>
    <View>
      <Name>View1</Name>
      <ShowEvent>
        <![CDATA[
StartJS

  $('.appView').append('<span id="return-to-top"><i class="fas fa-arrow-circle-up"></i></span>');

  $('.appView').scroll(function() {
    if ($(this).scrollTop() >= 50) {        // If page is scrolled more than 50px
        $('#return-to-top').fadeIn(200);    // Fade in the arrow
    } else {
        $('#return-to-top').fadeOut(200);   // Else fade out the arrow
    }
  });

  $('#return-to-top').click(function() {      // When arrow is clicked
    $('.appView').animate({
        scrollTop : 0                       // Scroll to top of body
    }, 500);
  });
EndJS]]>
      </ShowEvent>
      <Controls>
        <Control Role="3001">
          <Name>Input1</Name>
          <Top>40</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input2</Name>
          <Top>88</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input3</Name>
          <Top>136</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input4</Name>
          <Top>184</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input5</Name>
          <Top>232</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input6</Name>
          <Top>280</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input7</Name>
          <Top>328</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input8</Name>
          <Top>376</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input9</Name>
          <Top>424</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input10</Name>
          <Top>472</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input11</Name>
          <Top>520</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input22</Name>
          <Top>568</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="3001">
          <Name>Input23</Name>
          <Top>616</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <TabIndex>0</TabIndex>
          <Value>Input1</Value>
        </Control>
        <Control Role="2001">
          <Name>Button19</Name>
          <Top>664</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>40</Height>
          <Text>
            <![CDATA[Button1]]>
          </Text>
          <Kind>primary</Kind>
          <TabIndex>0</TabIndex>
        </Control>
        <Control Role="6002">
          <Name>Label1</Name>
          <Top>11</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>24</Height>
          <Text>Scrollable inputs</Text>
        </Control>
        <Control Role="1001">
          <Name>PaddingBottomContainer</Name>
          <Top>712</Top>
          <Left>8</Left>
          <Width>304</Width>
          <Height>16</Height>
        </Control>
      </Controls>
    </View>
  </Views>
  <Functions />
  <Files>
    <Styles />
    <Scripts />
    <Folders />
    <Images />
    <Others />
  </Files>
  <Generator>
    <Name>App Builder</Name>
    <Version>2019.28 (4/1/2019)</Version>
    <Email>mailto:info@decsoftutils.com</Email>
    <Website>https://www.decsoftutils.com/</Website>
    <Copyright>©2019 App Builder by DecSoft</Copyright>
  </Generator>
</AppBuilder>

Here is how this sample look:

Purchase one or more licenses of our products if they are useful to you!

Harald Schneider

Perfect! You saved my day :-) Thank you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.