有什么方法可以防止在内部javascript函数中滚动到顶部?

时间:2014-12-18 20:05:54

标签: javascript jquery html css events

什么是javascript / jQuery解决方案,以防止在点击链接时滚动到顶部用于内部javascript功能 inner()

解决方案应该在内部功能中。是否有可能不将事件作为参数传递?其他解决方案在下面的代码中提供了解释,但没有人在inner()中作为解决方案。代码如下。 请滚动至最低链接。 inner()功能中的最低链接需要解决方案。

以下是jsFiddle code

HTML:

<div>
    <p><a href="#">it jumps</a></p>
    <p><a href="#">it jumps</a></p>
    <p><a href="#">it jumps</a></p>
    <p><a href="#">it jumps</a></p>
    <p><a href="javascript:void(0);" id="jsSolution">no jumps - jsSolution</a></p>
    <p><a href="#" id="jqSolution">no jumps - jqSolution</a></p>
    <p><a href="#!">no jumps - html Solution</a></p>
    <p><a href="#" id="problem">how to prevent this from jumping - javascript solution in the add() function</a></p>
</div>

的javascript:

$(function(){
    function inner(){


        //prevent from scrolling to top here - solution is needed here;

        return 4;
    }
    function add() {
        alert('how to prevent jumping to top in the add function');
        var counter = 0;
        var res=inner();
        alert(res);//4
        //some code goes here
        //and here
        //this doesn't work e.preventDefault();
        return counter; 
    }
    $('#jqSolution').click(function(e) {
     //return false; 
     e.preventDefault(); // same thing as above
    });
    $('#problem').click(function(e) {
         add();
    });
});

包含jQuery库。

的CSS:

div{
border:1px solid red;
    width:200px;
}
p{
    padding:50px;
}

谢谢。

P.S。链接href =&#34;#&#34;无法更改,javascript代码不应被销毁。

1 个答案:

答案 0 :(得分:2)

我认为我没有完全找到你,但你可以使用preventDefault,这样就不会执行锚标记的默认操作。 Js对你的小提琴进行了一些改动,使其成功: -

http://jsfiddle.net/sahilbatla/guxdku9w/2/

$(function(){
    function inner(e){
        e.preventDefault();

        //prevent from scrolling to top here - solution is needed here;

        return 4;
    }
    function add(e) {
        alert('how to prevent jumping to top in the add function');
        var counter = 0;
        var res=inner(e);
        alert(res);//4
        return counter; 
    }
    $('#jqSolution').click(function(e) {
     //return false; // prevent default click action from happening
     e.preventDefault(); // same thing as above
    });

    $('#problem').click(function(e) {
         add(e);
    });
});