1

I'm a newbie to javascript, so please forgive if I ask things that are painfully obvious.

I am using Sennajs for my personal project. I have a issue like in gallery example. When click a link, it makes the page jump to the top. I used to use this code from jquery to fix it. However it also prevents senna from working.

$('a').click(function(e) {
    // do something 
    return false;
    e.preventDefault();
});

Any help would be very appreciated.

brandizzi
  • 26,083
  • 8
  • 103
  • 158
bachcao
  • 133
  • 1
  • 2
  • 6

3 Answers3

1

It turns out that you can use app.setUpdateScrollPosition(false) to avoid jumping to the top of the page after every SennaJS navigation:

var app = new senna.App();
app.setUpdateScrollPosition(false);

// ...your code here...

Old Solution (Not Recommended):

Note: this solution is unnecessarily overcomplicated since I wrote it before I knew about app.setUpdateScrollPosition(false).

Instead of preventing SennaJS from executing, you could save the current scroll position before navigating and scroll to the correct position after navigating:

var app = new senna.App();

// ...your code here...

function getScrollTop() {

    // Taken from Engineer's answer:
    // https://stackoverflow.com/questions/11193453/find-the-vertical-position-of-scrollbar-without-jquery#11193613
    return (window.pageYOffset !== undefined) ? window.pageYOffset :
        (document.documentElement || document.body.parentNode || document.body).scrollTop;
}

var scrollTop = getScrollTop();

app.on('beforeNavigate', function(event) {
    scrollTop = getScrollTop();
});

app.on('endNavigate', function(event) {
    window.scrollTo(0, scrollTop);
});

For more information about scroll positions and JavaScript, see Engineer's answer here and MDN's window.scrollTo() documentation.

For more information about SennaJS Lifecycle Events, see the SennaJS documentation

Note: this may be a bug in SennaJS, so I've created a bug report (#184).

Community
  • 1
  • 1
stiemannkj1
  • 4,418
  • 3
  • 25
  • 45
0

You return before actually calling preventDefault. The following will work: 

$(function(){
      $('a').click(function(e) {
         e.preventDefault();
         return false;
      });
    });
skay-
  • 1,546
  • 3
  • 16
  • 26
  • Yes. However, I don't know how to make // do something with Sennajs. That's my issue. Please help. – bachcao Feb 13 '15 at 19:14
  • What exactly are you trying to do? I suggest to just show more code so we can see the real issue – skay- Feb 13 '15 at 19:17
  • As I mentioned in my question. Their example gallery also has this problem. When you click on any image link it jumps to top of page. You can find it here http://sennajs.com/examples/gallery/static.html – bachcao Feb 13 '15 at 19:30
  • What do you mean just to the top of the page. It seems that each time you click an image, a new page its loaded with that photo. – skay- Feb 13 '15 at 19:33
  • It's ajax. It do not loading completely new page. You can know this by opening browser inspection tool. – bachcao Feb 13 '15 at 19:36
0

The reason why your code doesn't work is because you return before doing anything.

$('a').click(function(e) {
    e.preventDefault();
    // do something 
    return false;
});

so, do something after you prevent the normal behaviour first.

taesu
  • 4,482
  • 4
  • 23
  • 41